脚本宝典收集整理的这篇文章主要介绍了vue中的ref和$refs，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue中的ref和$refs全部内容，希望文章能够帮你解决vue中的ref和$refs所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。