VUE同級元件通訊

2021-09-26 21:17:15 字數 488 閱讀 2887

vue 除了常用的父子元件通訊之外, 有時也會用到兄弟元件即同級元件之間的通訊

解決方案:(例: 元件a和元件b之間進行通訊, a控制b展示隱藏)

1. 先新建乙個js檔案,暫叫它為eventbus.js (檔名隨意), 在內部註冊乙個空的vue 例項, 作為兄弟元件之間的中轉站

import vue from 'vue'

export default new vue

2. 在元件a引入中轉站檔案, 並且繫結事件

3. 在元件b中引入中轉站檔案, 並且獲取a的繫結事件

元件b中接受a的事件時, 需要在mounted中進行

vue同級元件通訊(只用vue)

vue元件通訊,有父子元件通訊和同級元件通訊兩種。在有vuex的時候,可以很輕易的通過全域性的 store來進行中轉,若只用vue自身進行同級通訊。例子中是ap1顯示me1資訊,在ap2中用按鈕改變ap1中的值。如下 id ap1 div id ap2 id btn2 click mejia1 a ...

vue元件間通訊 資料傳遞(父子元件,同級元件)

總結一下對vue元件通訊的理解和使用。子元件 page1.vue 子元件 page2.vue 單價 降價1元 數量 總金額 元 剩餘金額 元import page1 from components page1 components 此處的price則是傳遞給子元件的值 props 單價 單價 降價1...

Vue 元件通訊

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