Vue進階（三十九）：vue $refs的基本用法

• 說明：vm.$refs 一個對象，持有已註冊過 ref 的所有子組件（或HTML元素）
• 使用：在 HTML元素 中，添加ref屬性，然後在JS中通過vm.$refs.屬性來獲取
• 注意：如果獲取的是一個子組件，那麼通過ref就能獲取到子組件中的data和methods

一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節點，然後在獲取input1的值。

但是用ref綁定之後，我們就不需要在獲取dom節點了，直接在上面的input上綁定input1，然後$refs裏面調用就行。

然後在javascript裏面這樣調用：this.$refs.input1 這樣就可以減少獲取dom節點的消耗了。示例代碼如下：

<-- 添加ref屬性 -->
<div id="app">
	<input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>

// 獲取註冊過 ref 的所有組件或元素
<script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  減少獲取dom節點的消耗
            }
        }
    })
</script>