13-Vue特殊属性-ref

ref ：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

也就是说Vue不推荐我们直接 *** 作DOM, 但是在开发中有时候我们确实需要拿到DOM *** 作DOM

那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

在Vue中如果想要拿到DOM元素我们可以通过ref来获取

例如: <p ref="myP">我是段落</p>

例如 this$refmyP

refs : 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例

注意： refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs 结语

在讲ref特点之前我们先来回顾， 原生语法获取元素的特点

例如： 通过原生的语法 documentquerySelector 获取到的都是被渲染之后DOM元素， 也就是原生的元素

在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取

拿到了组件后, 还可以访问组件中的数据

和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法

PS: 生命周期钩子 = 生命周期函数 = 生命周期事件

    21创建期间的生命周期方法beforeCreate:

        created:

        beforeMount:

        mounted:

    22运行期间的生命周期方法beforeUpdate:

        updated:

    23销毁期间的生命周期方法beforeDestroy:

        destroyed：

1Vue特殊特性Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面

也就是说Vue不推荐我们直接 *** 作DOM, 但是在企业开发中有时候我们确实需要拿到DOM *** 作DOM

那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM

在Vue中如果想要拿到DOM元素我们可以通过ref来获取2ref使用21在需要获取的元素上添加ref属性 例如: <p ref="mypp">我是段落

22在使用的地方通过 this$refsxxx获取, 例如this$refmyppp

3ref特点ref添加到元素DOM上, 拿到的就是元素DOM

ref添加到组件上, 拿到的就是组件

1Vue渲染组件的两种方式

    11先定义注册组件, 然后在Vue实例中当做标签来使用

    12先定义注册组件, 然后通过Vue实例的render方法来渲染

2两种渲染方法的区别

    11当做标签来渲染, 不会覆盖Vue实例控制区域

    12通过render方法来渲染, 会覆盖Vue实例控制区域

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>

js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name  拿不到值

解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

        。。。。

            this$refs company_name

})

感谢您的提问。根据您的问题，我了解到您想了解如何在el-button组件中添加原生方法。以下是我为您提供的解答：

在el-button组件中添加原生方法的方法与在普通HTML元素中添加原生方法类似。可以通过获取el-button组件的DOM元素，然后在其上添加事件监听器的方式来实现。具体步骤如下：

1 使用ref属性获取el-button组件的DOM元素，例如：

```

<el-button ref="myButton">按钮</el-button>

```

2 在Vue组件的mounted生命周期函数中获取DOM元素，并为其添加事件监听器，例如：

```

mounted() {

const buttonElement = this$refsmyButton$el; // 获取DOM元素

buttonElementaddEventListener('click', thishandleClick); // 添加事件监听器

},

methods: {

handleClick() {

// 在这里编写原生方法的代码逻辑

}

}

```

3 在Vue组件的beforeDestroy生命周期函数中移除事件监听器，以避免内存泄漏，例如：

```

beforeDestroy() {

const buttonElement = this$refsmyButton$el; // 获取DOM元素

buttonElementremoveEventListener('click', thishandleClick); // 移除事件监听器

}

```

以上就是在el-button组件中添加原生方法的方法。需要注意的是，在添加事件监听器时，需要使用addEventListener方法，并指定事件类型和事件处理函数。在移除事件监听器时，需要使用removeEventListener方法，并指定相同的事件类型和事件处理函数。希望我的回答能够对您有所帮助，如有其他问题，请随时向我提问。

在组件上定义ref="名字",可以通过this$refs名字，，，获取dom元素。。例如下面：

<div id="out">

    <h2>组件 *** 作</h2>

    <hr/>

    <p ref="tit">组件 *** 作组件 *** 作v组件 *** 作组件 *** 作组件 *** 作</p>

    <button @click="tap">点击</button>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

        el:'#out',

        data:{

        },

methods:{

        tap(){

             consolelog(this$refstitinnerHTML)//获取dom元素把dom元素的内容拿了出来

        }

    }

})

v-model,,,在输入框，单选框，多选框等等，添加v-model=“tit”的时候v-model的值必须在data里面声明；

v-model的值是他们的value值

ref 目前使用过的三种方式：

1、在html的元素中使用rel，可在js中直接调用该元素，用this$refs（ref值） 获取到的是dom元素

2、在vue的组件上加rel，可在js中直接使用该组件包括该组件的方法，用this$refs（ref值）方法名()

3、在v-for的循环列中使用rel

避坑：

v-for中使用rel需要绑定 变量 ，即v-bind:rel='变量名'

ref 需要在dom渲染完成后才会有 ，在使用的时候确保dom已经渲染完成。比如在生命周期  mounted(){} 钩子中调用 ，或者 在 this$nextTick(()=>{}) 中调用 。

如果rel循环未绑定变量，那就$refs获取获取数组再循环得到使用即可

例子1：在html元素上使用

<div id="app">

    <h1 ref="h1ele">这是h1</h1>

    <hello ref="ho"></hello>

    <button @click="getref">获取h1元素</button>

</div>

获取注册过 ref 的所有组件或元素

methods: {

        getref() {

          // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

          consolelog(this$refsh1eleinnerText);

          this$refsh1elestylecolor = 'red';// 修改html样式

          consolelog(this$refshomsg);// 获取组件数据

          consolelog(this$refshotest);// 获取组件的方法

        }

      }

例子2：

<html部分

<view class="example-body">

<button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部d出 popup</button>

<button class="button" type="primary" @click="togglePopup('center', 'popup')">中间d出 popup</button>

<button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部d出 popup</button>

</view>

<uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

<uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

<view class="uni-tip">

<text class="uni-tip-title">警告</text>

<text class="uni-tip-content">这是一个通过自定义 popup，自由扩展的 警告d窗。点击遮罩不会关闭d窗。</text>

<view class="uni-tip-group-button">

<text class="uni-tip-button" @click="cancel('tip')">取消</text>

<text class="uni-tip-button" @click="cancel('tip')">确定</text>

</view>

</view>

</uni-popup>

<js部分

methods: {

togglePopup(type, open) {

switch (type) {

case 'top':

thiscontent = '顶部d出 popup'

break

case 'bottom':

thiscontent = '底部d出 popup'

break

case 'center':

thiscontent = '居中d出 popup'

break

}

thistype = type

this$nextTick(() => {

this$refs['show' + open]open()

})

},

cancel(type) {

this$refs['show' + type]close()

},

change(e) {

consolelog('是否打开:' + eshow)

}

},

一般来讲获取DOM元素，需documentquerySelector（"class"）获取这个dom节点，然后在获取元素的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的元素上绑定rel，然后$refs里面调用就行。

然后在javascript里面这样调用：this$refs元素绑定rel  这样就可以减少获取dom节点的消耗了

首先

vue的点击事件

是用

@click

=

“clickfun()”

属性

在html中绑定的,

在点击的函数中

添加$event

参数就可以

比如

<button

@click

=

“clickfun($event)”>点击</button>

methods:

{

clickfun(e)

{

//

etarget

是你当前点击的元素

//

ecurrentTarget

是你绑定事件的元素

}

},

以上这篇vue

的点击事件获取当前点击的元素方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:vue如何获取点击事件源的方法VUE中v-on:click事件中获取当前dom元素的代码vue获取当前点击的元素并传值的实例vue获取dom元素注意事项在Vue组件中获取全局的点击事件方法

以上就是关于13-Vue特殊属性-ref全部的内容，包括:13-Vue特殊属性-ref、Vue生命周期方法、vue 无法获取DOM的innerHtml等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！