Vue 非父子元件之間的通訊

2022-07-04 09:36:09 字數 1035 閱讀 5897

實現非父子元件之間的通訊,有以下幾種方式

第一種是最常用的,此處只介紹第一種。

bus匯流排實現非父子元件之間的通訊

<

div

id>

div>

<

script

>

//建立乙個空的vue物件作為bus**事件匯流排

vue.prototype.$bus

=new

vue();

vue.component(

'myheader',}})

vue.component(

'mybody',}

<

/p>

<

/div>

`, data()

},created()中寫監聽

//寫法一

//var self=this; //直接用this沒效果,需要把this賦給乙個臨時變數,使用臨時變數代替this

//在bus匯流排中註冊乙個事件監聽,當指定的事件發生時會呼叫對應的函式

//self.$bus.$on('received',function(val));

//寫法二

this

.$bus.$on(

'received

',val

=>

) }

})newvue();

script

>

說明第一種寫法原本是這樣的:

this.$bus.$on('received',function(val));

我們想要的是2個this都應該是指向當前元件的,這樣this.msg才能獲取到當前元件的msg變數。

但實際上,第二個this(函式體中的那個this),指向的bus匯流排,this.$bus  當前物件已經變成了bus匯流排,所以要借助乙個臨時變數。

第二種寫法:

箭頭函式不改變作用域,2個this都是指向當前元件,可以直接使用this。

Vue非父子元件之間的通訊

非父子元件的通訊一般有兩種方法,一種是通過eventhub,也就是建立乙個空的vue物件作為元件間通訊的介質 另一種則是通過vuex狀態管理。這裡介紹的是第一種方法。先貼上 1 div id 2 foo foo 3 bar bar 4div 56 template id foo 7 div 8 p ...

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

父傳子 prop 自定義屬性,將父親的資料傳給兒子 1.在元件標籤上使用自定屬性 2.在元件內部通過props來接收自定義屬性 3.子元件接收後既可以在元件裡直接使用,不過只能用不能改 父元件 子元件 這裡是元件 子傳父 emit emit 可以觸發繫結在元件身上自定義事件 1.在父元件中的子元件標...

vue 非父子元件通訊

vuex模組狀態管理進行模組間的通訊 1.建立名為store 2.建立名為index.js檔案 內容 import vue from vue import vuex from vuex vue.use vuex const state export default new vuex.store 3....