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