美文网首页vue
vue 之 ref 用法

vue 之 ref 用法

作者: hunter97 | 来源:发表于2019-03-21 20:22 被阅读145次

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

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

    相关文章

      网友评论

        本文标题:vue 之 ref 用法

        本文链接:https://www.haomeiwen.com/subject/qmrtvqtx.html