vue的父子元件以及非父子元件之間的通訊方式

2022-07-18 04:48:16 字數 1602 閱讀 9159

父傳子  prop

自定義屬性,將父親的資料傳給兒子

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

2. 在元件內部通過props來接收自定義屬性

3. 子元件接收後既可以在元件裡直接使用,不過只能用不能改

//父元件

//子元件

這裡是元件

}

子傳父  $emit

$emit 可以觸發繫結在元件身上自定義事件

1.在父元件中的子元件標籤繫結乙個自定義事件

2.在子元件的內部 通過$emit 觸發這個自定事件

//這裡是子元件

 這裡是子元件的按鈕

vue.component('son',

},

})

//例項:

let vm1 = new vue(

},

})

兄弟通訊

原理:
1. 建立乙個空例項 作為橋梁
2. 通過 $on 在空例項上註冊事件
3. 在任何地方 只要能獲取到空例項 那就可以通過 $emit 方法觸發事件
步驟:
2個元件 兄弟關係  1個的按鈕控制另乙個div的顯示隱藏
1. 元件二:
找到發生改變的元件 新增改變事件和資料關聯

元件裡的資料只有自己的方法可以修改

2. 元件1:通過button來進行控制

vue2 0父子元件以及非父子元件通訊

官網api 父元件 child message hello child 子元件 vue.component child 結果 hello 父元件 child my message parentmsg child data 子元件 通過props屬性接收資料 方式一props mymessage 方式...

vue2 0父子元件以及非父子元件如何通訊

父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 parent msg 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料.那麼,如果子元件想要改變資...

vue2 0父子元件以及非父子元件如何通訊

vue2.0父子元件以及非父子元件如何通訊 父元件資料如何傳遞給子元件呢?可以通過props屬性來實現 父元件 這裡必須要用 代替駝峰 data 子元件通過props來接收資料 方式1 props childmsg 方式2 props 方式3 props 這樣呢,就實現了父元件向子元件傳遞資料.那麼...