vue

vue 之 ref 用法

2019-03-21  本文已影响145人  hunter97

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的阶段性了解,后期将会有更深入的研究。

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

上一篇 下一篇

猜你喜欢

热点阅读