# ref 引用

ref 可以在不依赖 jQuery 的情况下，获取 DOM 元素或组件的引用
每个 vue 的组件实例上，都包含一个 $refs 对象，里面储存着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 对象指向一个空对象

# 引用 DOM 元素

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

<h3 ref='myh3'>MyRef组件</h3>
<button @click='getRef'>获取$refs引用</button>

methods: {
    getRef() {
        console.log(this.$refs.myh3)
        this.$refs.myh3.style.color = 'red'
    }
}

# 引用 vue 组件

如果想要使用 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 (cb) 方法

组件的 $nextTick (cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素