vue 中的ref和$refs用法

<div id="app">

　　 <input type="text" ref="input1"/>

　　<button @click="add">添加</button>

 </div>

 

<script>

　　 new Vue({

　　　　el: "#app",

　　　　 methods:{

　　　　　　add(){

　　　　　　　　this.$refs.input1.value ="22";   //this.$refs.input1 減少獲取dom節點的消耗

 　　　　　　}

　　　　 }

　　 })

</script>

 

要點：

1.ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上，就比如我們想訪問子組件的一些數據和方法，就可以使用ref為子組件指定一個引用的id,調用方式為

const child = parent.$refs.id

2.一般來講，獲取DOM元素，需document.querySelector（".input1"）獲取這個dom節點，然后在獲取input1的值。但是用ref綁定之后，我們就不需要在獲取dom節點了，直接在上面的input上綁定input1，然后$refs里面調用就行。然后在javascript里面這樣調用：this.$refs.input1  這樣就可以減少獲取dom節點的消耗了