vue元件之間的通訊

2021-09-13 11:33:42 字數 1572 閱讀 6741

1、父元件-->子元件

父元件**

子元件**

export default 

};

或者this.$children 訪問它所有的子元件, 而且可以遞迴向下無限訪問,

2、子元件-->父元件

傳送事件/監聽事件

子元件中某函式內傳送事件:

this.$emit('toparentevent', 'data');
父元件監聽事件:

或者使用 this.$parent 可以直接訪問該元件的父例項或元件,而且可以遞迴向上訪問

3、父元件直接獲取子元件屬性或方法

給要呼叫的子元件起個名字。將名字設定為子元件 ref 屬性的值。

父元件中通過 $refs.元件名 來獲得子元件,也就可以呼叫子元件的屬性和方法了。

var child = this.$refs.aname

child.屬性

child.方法()

最重要的方式:vue元件通訊,**控制匯流排

實現不同組價之間的通訊,其實很簡單,請看下面步驟

1、新建control.js

import vue from 'vue'

export default new vue()

2、在需要發射或者監聽的介面引入,並使用。

這就是乙個**事件匯流排,然後我們在需要傳送或者監聽事件的介面引入這個檔案,然後使用裡面的$on/$emit來監聽和發射訊息即可。

import control from './control.js'

// 監聽

created ()

// 發射時間

methods ()

}

3、例項

a: 目錄, 介面

傳送給兄弟元件

c: parenttwo.vue

傳送訊息到子元件

d: childrenone.vue

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感,所以prop中的駝峰值需要等價於短...

vue元件之間的通訊

區域性元件 區域性元件必須手動掛載,不然無法生效。全劇元件 全域性元件不需要手動掛載,但不常用,盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一,核心目標是擴充套件htnl元素,封裝可重用 元件可按照template,style,sc...