vue中的ref和$refs

2024年5月22日 189次阅读 来源: 沈小白

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
普通的DOM元素上使用

<div id="app7">
    <input type="text"ref="TEXT"/ >
    <button @click="add">添加</button>
</div>
var app7=new Vue({
    el:"#app7",
    data:{

    },
    methods:{
        add:function(){
           console.log(this.$refs);
        }
    }
})

子组件上使用

<div id="app7">
    <aaa ref=inputText></aaa>
    <input type="text"ref="TEXT" >
    <button @click="add">添加</button>
</div>
 Vue.component('aaa',{
        template:"<div>我是一个组件</div>"
    })
    var app7=new Vue({
        el:"#app7",
        data:{

        },
        methods:{
            add:function(){
               console.log(this.$refs.inputText);
               console.log(this.$refs);
            }
        }
    })
    var aaa=app7.$refs.inputText;
    //console.log(aaa);
    //console.log(aaa.$el.innerText);

$refs:一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例
注意：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

    原文作者：沈小白
    原文地址: https://segmentfault.com/a/1190000017098817
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞