ref引用

一.什么是ref引用

1.ref用来辅助开发者在不依赖jQuery的情况下，获取 DOM元素或组件的引用

 2.每个Vue组件实例上，都包含了一个$refs对象，里面存储着对应的DOM元素或组件的引用。默      认情况下，组件的$refs指向一个空对象

二.操作DOM元素

<template>
    <div>
        <h1 ref='myh1'> App 根组件 </h1>   //给 h1 ref属性命名
        <button @click='change'> 改变h1颜色 </button>
    </div>
</template>

<script>
    export default {
    method: {
        change () {
            this.$refs.myh1.style.color = 'red'   
        }
    }
}
</script>

三.使用ref引用组件实例

        如果想要使用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 () // add()方法为 my-counter 组件中的方法
    }
}

四.this.$nextTick(cb)方法

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

this.$nextTick(()=>{
    //调用函数
})