Andy's blog

If you always do what you've always done, you'll always get what you've always got.

0%

Vue Component溝通($parent、$children)

參考資料


$parent功能介紹

子元件可以透過this.$parent,來存取父層組件。這種方法用起來就是爽XD,不用在子元件中發送$emit事件,來呼叫父元件。
使用時機:通常使用情境都是在debug上,開發上還是不建議透過子元素來覆寫父層元素。

原因:直接透過子元素來覆寫父層元素,會造成父元件跟子元件耦合過深重,日後無法單獨把這個子元件拉出來使用。

範例

連結
HTML部分

1
2
3
<div id="app">
<my-component ref="comp1" :parent-msg="msg"></my-component>
</div>

JavaScript部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Vue.component('my-component',{
template:`<div>{{parentMsg}}</div>`,
props: ["parentMsg"],
mounted(){
console.log("$parent",this.$parent.msg);

window.setTimeout(() =>{
this.$parent.msg="Hello"
},2000)
},
})


new Vue({
el:'#app',
data:{
msg:'Msg of Parent'
}
})

說明:我們在兩秒過後,把父層msgMsg of Parent,更改為Hello

$children功能介紹

父元件可以透過this.$children,來存取子組件(陣列)。至於為何是陣列,我們可以來複習一下這張圖。圖片中可以發現每個子元件都只會有一個父元素,但是父元素就不同摟,他可能會有0~無限個子元素。這也就是為何取出來是陣列原因!
https://ithelp.ithome.com.tw/upload/images/20191005/20114645rgdC9oRL7N.png

ref功能介紹

為了不讓v-if影響子元件顯示順序,我們可以透過幫子組件設定別名ref,來確保組件順序不受影響。

範例

練習連結
HTML部分

1
2
3
4
5
6
7
8
<div id="app">
<my-component2 ref="comp2"></my-component2>
<my-component3 ref="comp3"></my-component3>

<hr>
<div> {{ msg }}</div>
</div>

JavaScript部分

1
2
3
4
5
6
7
8
9
10
11
new Vue({
el: '#app',
data: {
msg: 'Msg of Parent!'
},
mounted() {
console.log(this.$children[0]) // VueComponent,my-component3
console.log('$children2: ', this.$refs.comp2.msg); //Hi COMP2
console.log('$children3: ', this.$refs.comp3.msg); //Hi COMP3
}
});