前面的話
有時候需要父組件訪問子組件，子組件訪問父組件，或者是子組件訪問根組件。 在組件實例中，Vue提供了相應的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細介紹Vue組件實例間的直接訪問
$parent
$parent表示父組件的實例，該屬性只讀
下面是一個簡易實例
<div id="example"> <parent-component></parent-component></div><template id="parent-component"> <div class="parent"> <h3>我是父組件</h3> <input v-model="parentMsg"> <p>{{parentMsg}}</p> <child-component></child-component> </div></template><template id="child-component"> <div class="child"> <h3>我是子組件</h3> <p>{{msg}}</p> <button v-on:click="showData">顯示父組件數據</button> </div></template><script>// 注冊Vue.component('parent-component', { template: '#parent-component', data(){ return{ parentMsg:'我是父組件的數據' } }, components:{ 'child-component':{ template:'#child-component', data(){ return{ msg:'' } }, methods:{ showData(){ this.msg = this.$parent.parentMsg; } } } }})// 創建根實例new Vue({ el: '#example'})</script>$root
$root表示當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自己。該屬性只讀
<div id="example"> <h3>我是根組件</h3> <input v-model="rootMsg"> <p>{{rootMsg}}</p> <parent-component></parent-component></div><template id="parent-component"> <div class="parent"> <h3>我是父組件</h3> <input v-model="parentMsg"> <p>{{parentMsg}}</p> <child-component></child-component> </div></template><template id="child-component"> <div class="child"> <h3>我是子組件</h3> <p> <button v-on:click="showRootData">顯示根組件數據</button><span>{{rootMsg}}</span> </p> <p> <button v-on:click="showParentData">顯示父組件數據</button><span>{{parentMsg}}</span> </p> </div></template><script>// 注冊Vue.component('parent-component', { template: '#parent-component', data(){ return{ parentMsg:'我是父組件的數據' } }, components:{ 'child-component':{ template:'#child-component', data(){ return{ parentMsg:'', rootMsg:'' } }, methods:{ showParentData(){ this.parentMsg = this.$parent.parentMsg; }, showRootData(){ this.rootMsg = this.$root.rootMsg; }, } } }})// 創建根實例new Vue({ el: '#example', data:{ rootMsg:'我是根組件數據' }})</script>$children
$children表示當前實例的直接子組件。需要注意$children并不保證順序，也不是響應式的。如果正在嘗試使用$children來進行數據綁定，考慮使用一個數組配合v-for來生成子組件，并且使用Array作為真正的來源
<div id="example"> <parent-component></parent-component></div><template id="parent-component"> <div class="parent"> <h3>我是父組件</h3> <button @click="getData">獲取子組件數據</button> <br> <div v-html="msg"></div> <child-component1></child-component1> <child-component2></child-component2> </div></template><template id="child-component1"> <div class="child"> <h3>我是子組件1</h3> <input v-model="msg"> <p>{{msg}}</p> </div></template><template id="child-component2"> <div class="child"> <h3>我是子組件2</h3> <input v-model="msg"> <p>{{msg}}</p> </div></template><script>// 注冊Vue.component('parent-component', { template: '#parent-component', data(){ return{ msg:'', } }, methods:{ getData(){ let html = ''; let children = this.$children; for(var i = 0; i < children.length;i++){ html+= '<div>' + children[i].msg + '</div>'; } this.msg = html; } }, components:{ 'child-component1':{ template:'#child-component1', data(){ return{ msg:'', } }, }, 'child-component2':{ template:'#child-component2', data(){ return{ msg:'', } }, }, } })// 創建根實例new Vue({ el: '#example',})</script>$refs
組件個數較多時，難以記住各個組件的順序和位置，通過序號訪問子組件不是很方便
在子組件上使用ref屬性，可以給子組件指定一個索引ID：
<child-component1 ref="c1"></child-component1><child-component2 ref="c2"></child-component2>
在父組件中，則通過$refs.索引ID訪問子組件的實例
this.$refs.c1
this.$refs.c2
<div id="example"> <parent-component></parent-component></div><template id="parent-component"> <div class="parent"> <h3>我是父組件</h3> <div> <button @click="getData1">獲取子組件c1的數據</button> <p>{{msg1}}</p> </div> <div> <button @click="getData2">獲取子組件c2的數據</button> <p>{{msg2}}</p> </div> <child-component1 ref="c1"></child-component1> <child-component2 ref="c2"></child-component2> </div></template><template id="child-component1"> <div class="child"> <h3>我是子組件1</h3> <input v-model="msg"> <p>{{msg}}</p> </div></template><template id="child-component2"> <div class="child"> <h3>我是子組件2</h3> <input v-model="msg"> <p>{{msg}}</p> </div></template><script>// 注冊Vue.component('parent-component', { template: '#parent-component', data(){ return{ msg1:'', msg2:'', } }, methods:{ getData1(){ this.msg1 = this.$refs.c1.msg; }, getData2(){ this.msg2 = this.$refs.c2.msg; }, }, components:{ 'child-component1':{ template:'#child-component1', data(){ return{ msg:'', } }, }, 'child-component2':{ template:'#child-component2', data(){ return{ msg:'', } }, }, } })// 創建根實例new Vue({ el: '#example',})</script>總結
雖然vue提供了以上方式對組件實例進行直接訪問，但并不推薦這么做。這會導致組件間緊密耦合，且自身狀態難以理解，所以盡量使用props、自定義事件以及內容分發slot來傳遞數據。
新聞熱點
疑難解答
