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

本文固定链接: http://www.js-code.com/vue-js/vue-js_25678.html