同級(兄弟)元件間不能直接傳遞資料,需要建立乙個類似橋梁的載體去實現。
1、定義乙個公共檔案public.js,建立位置工程src目錄下與main.js同級(**內容是建立乙個空的vue例項):
import vue from 'vue'
export default new vue()
2、建立好以後,同級(兄弟)元件分別引入public.js這個檔案:
import public from '../public.js'
3、例如現在有a.vue和b.vue兩個同級(兄弟)元件,假設a.vue元件傳送資料,通過$emit將事件和引數』傳遞』給b.vue(實際上是傳遞資料到public.js內):
price(newprice)
4、在b.vue元件裡接收資料,通過$on將事件和資料從a.vue接收過來:
public.$on("xx", val=> );
感謝分享 vue元件間通訊 資料傳遞(父子元件,同級元件)
總結一下對vue元件通訊的理解和使用。子元件 page1.vue 子元件 page2.vue 單價 降價1元 數量 總金額 元 剩餘金額 元import page1 from components page1 components 此處的price則是傳遞給子元件的值 props 單價 單價 降價1...
vue實現兄弟元件或者同級元件傳值方法
該方法需要先在main.js檔案中暴露出乙個例項,也就是 main.js檔案 export const eventbus new vue 然後在需要使用到的兄弟元件中引入這個main.js檔案 比如有componenta和componentb這兩個兄弟元件 在componentb中需要使用到comp...
VUE 元件間資料互動
元件通過props來接收傳遞過來的值vue.component a item 父元件通過屬性傳遞值給子元件 父元件的值 a item 靜態的值 n a item 動態的值 注意 在props中使用駝峰命名時,在末班中需要用短橫線方式,字串模板中沒有限制。例 vue.component a item ...