vue元件間方式總結

2022-07-11 03:27:14 字數 852 閱讀 4127

$bus的使用:

可以用於兄弟元件間或者無關係的元件間通訊

1、在main.js中:

vue.prototype.$bus = new vue()

2、a.vue檔案中:

this.$bus.$emit('msg',10000)

event.$emit('msg',this.msg)------傳送資料,第乙個引數是傳送資料的名稱,接收時還用這個名字接收,第二個引數是傳遞的數值;

3、b.vue檔案中:

this.$bus.$on('msg',v=>)

event.$on('msg',function(msg){}------接收資料,第乙個引數是資料的名字,與傳送時的名字對應,第二個引數是乙個方法,要對資料的操作

4、需要注意的是使用$bus的時候在接受bus的元件中別忘了再befordestroy函式中銷毀bus,不銷毀的話會一直疊加的呼叫這個方法

beforedestroy()

attrslisteners的使用:

參見: 

通過vue原型共享資料方法:

eg:

// main.js中這樣寫:

vue.prototype.commondata='www.baidu.com'// 應用檔案中使用如下:

created()

// 也可以改變值,但只針對於當前使用,如果別的也頁面依舊使用的話還是原來定義的值

created()

Vue中元件間通訊方式總結

這是最常用的元件通訊方式,適用於父子元件間資料傳遞 適用場景 巢狀的多層父子元件 只有父子元件兩個建議使用props和 emit 基本步驟 示例 網頁截圖 從這裡可以看到katex parse error expected got eof at end of input this.emit getc...

vue元件間通訊方式

一 props emit 將要傳遞的引數繫結到元件上,子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸,想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...

vue 元件間通訊總結

父 子元件通訊 1.props 此處不區分是否加引號,若不bind,皆作字串處理,否則作為表示式處理 若傳入物件,則子元件上的該物件與父元件中的該物件指向同乙個位址,如果希望對傳入的物件進行修改且不影響父元件,則需要看情況對其進行深 淺拷貝 若傳入的屬性在父元件中會發生變化,則將其放置在子元件的co...