vue元件通訊

父子通訊

父元件在子元件標籤設定乙個自定義屬性並新增屬性繫結傳遞乙個data中的資料

="father"

>
<
!-- 在son元件標籤上使用自定義屬性 --
>
"state"
>
<
/son>
<
/div>

props的值可以實陣列，也可以是物件，可以通過物件限制傳遞的資料型別

vue.

component
("son"
, //傳值的同時檢查資料的型別
// }
})

"son"

>
="son"
>
="test" v-show=
"hehe"
>
子元件的div
}<
/div>
<
/div>
<
/template>

在元件標籤上使用自定義屬性

在元件內部通過props來接受自定義屬性

接受完就可以在元件裡直接使用 只能用不能改 唯讀

子父通訊

在例項標籤中新增乙個自定義事件，事件處理函式為父元件的函式

>

這裡是例項
"add"
>
<
/son>
<
/div>

vue.

component
("son",}
})

let vue =

newvue(}
})

emit 可以觸發繫結的自定義事件

在元件標籤繫結乙個自定義事件

在元件內部可以觸發自定義事件

在子元件裡觸發父元件的方法

兄弟通訊

a.狀態提公升

將子元件的state提公升到父元件

b.事件匯流排

c.全域性狀態管理

事件匯流排eventbus

建立乙個空例項

let vue =

newvue
()

let son2 = vue.

component
("son2",}
,    methods:},
mounted()
});

let son1 = vue.

component
("son1",}
});

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。首先，父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說，就是子元件監聽的事件，在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件，改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...