vue 之 ref 用法

---

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。--官网简介
这里我们简单理解就是如果我们可以通过ref获取DOM 元素或组件实例。

一、DOM

<template>
    <div>
        <p ref="p">ref-test</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        mounted() {
            console.log(this.$refs.p)
        }
    }
</script>

DOM

二、组件

//组件文件
<template>
    <div>
        <p ref="p">ref-test</p>
    </div>
</template>
<script>
    export default {
        data() {
            return {}
        },
        mounted() {
            console.log(this.$refs.p)
        }
    }
</script>

//父组件文件
//引入组件
<com ref="com"></com>
//打印数据
console.log(this.$refs.com)

打印数据如图：

组件

由此可以看出，通过 ref我们可以快速的访问组件实例，及其相关属性方法。

注意

1. 这里我们只能取到组件的值或调用方法，不可以通过这个方法改变组件的相关属性值。
2. 因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs也不是响应式的，因此不可以用它在模板中做数据绑定。

这就是我对vue中ref的阶段性了解，后期将会有更深入的研究。

坚持自己内心的想法，真正想做的事。真正努力的人 都很低调。不在意外界影响，不抱怨生活现状，即使没有光环加身也依旧努力过好每一天。