父子通訊VUE

2022-06-22 10:03:09 字數 565 閱讀 4451

vue 的父子通訊

父傳子 傳遞

當子元件子在父元件中當做標籤使用的時候 通過給子元件繫結乙個自定義屬性 值為需要傳遞的資料

接收  : 子元件內部通過props 進行接收 

接收的方式一種是陣列另一種是物件 一般情況下我們用物件 因為物件接受可以校驗資料型別

props:【「自定義屬性」】

props:{

val:{

type:string,

default:預設值

子傳父傳遞:當子元件給父元件傳遞資料的時候 通過呼叫父元件給子元件邦定的自定義事件 然後將值傳過去

接收:父元件通過自定義事件的函式來接收子元件傳遞過來的資料

這個自定義方法函式在繫結的時候不需要加()

非父子每個元件this 指向不同 給vue。proprtype新增乙個屬性

1在vue的原型上新增乙個公共vue例項元件之間呼叫這個公共例項的$on/$emit 來傳遞資料  傳遞一方呼叫$emit 接收呼叫$on

2手動封裝$on$off$emit  原理 觀察者模式

3eventbus

4vuex

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數,則某個部分要和引數post對應,即 v bind post post...