淺談vue.js中$refs的使用方法（附程式碼）

相關推薦：《vue.js教程》

• #說明：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>

更多程式相關知識，請造訪：程式設計教學！ ！

以上是淺談vue.js中$refs的使用方法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！