[JavaScript知识库]vue基础——ref的引用

1.ref引用：用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用，每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象

2.使用ref引用页面上的DOM元素，则可以按照如下的方式进行操作：

//使用ref属性，为对应的DOM添加引用名称
<h3 ref="myh3">MyRef 组件</h3>
<button @click="getRef">获取$refs引用</button>

methods:{
    getRef(){
        //通过this.$refs引用的名称 可以获取到DOM元素的引用
        console.log(this.$refs.myh3)
        //操作DOM元素，把文本颜色改为红色
        this.$refs.myh3.style.color = 'red'
}    
}

使用ref引用组件实例：

//使用ref属性，为对应的“组件”添加引用名称
<my-counter ref="counterRef"></my-counter>
<button @click="getRef">获取$refs引用</button>

methods:{
    getRef(){
        //通过this.$refs.引用的名称，可以引用组件的实例
        console.log(this.$refs.counterRef)
        //引用到组件的实例之后，就可以调用组件上的methods方法
        this.$refs.counterRef.add()
}
}

额外补充：

this.$nextTick：使代码更新完成再执行下面的代码，用处：当需要某些代码在DOM重新渲染后执行

用法：this.$nextTick(() => this.$refs.属性.操作)