Vue中的v-el與v-ref
阿新 • • 發佈：2018-11-15
v-el
- 作用：
通過v-el我們可以獲取到DOM物件。
v-ref
- 作用：
通過v-ref獲取到整個元件（component）的物件。
示例
原始碼
<!DOCTYPE html> <html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>元件</title> </head> <body> <template id="demo"> <h2>元件物件</h2> </template> <div id="app"> <h2 v-el:myh2>DOM物件</h2> <button @click="getDom">獲取DOM物件</button> <hr> <demo v-ref:mycom></demo> <button @click="getCom">獲取元件物件</button> </div> <script src="../../../js/vue/vue/1.0/vue.js"></script> <script type="application/javascript"> //建立Vue物件 new Vue({ el:'#app' ,methods:{ getDom(){ console.log(this.$els.myh2); } ,getCom(){ console.log(this.$refs.mycom); } } ,components:{ 'demo':{ template:'#demo' } } }); </script> </body> </html>
結果
分析
上面的程式碼實現的功能是，通過點選獲取DOM物件按鈕，其會在控制檯中打印出其獲取的DOM物件資訊；而當我們點選第二個獲取元件物件按鈕時，其會在控制檯中打印出整個控制元件的資訊。
第一個方法中，其DOM物件是通過v-el將當前的h2的DOM物件繫結到this.$els中，其中myh2即為當前DOM物件的名稱，這裡注意的是，這裡是區分大小寫的，假如說我們在控制元件中用v-el:myH2定義，則在呼叫的時候，仍然使用this.$els.myh2，否則會出現undefined資訊。
第二個方法中，其元件物件通過v-ref將當前元件繫結到this.$refs
v-ref:myCom，則元件的呼叫仍然是this.$refs.mycom
而對於上面的這種大小寫情況，與其說是不很人性化，倒不如說是個bug更為恰當。