Vue非父子元件之間的通訊

非父子元件的通訊一般有兩種方法，一種是通過eventhub，也就是建立乙個空的vue物件作為元件間通訊的介質；另一種則是通過vuex狀態管理。這裡介紹的是第一種方法。

先貼上**：

1

<
div 
id>
2<
foo>
foo>
3<
bar>
bar>
4div
>56
<
template 
id="foo"
>
7<
div>
8<
p>the count of d is }
p>
9<
button 
@click
="addbar"
>foo
button
>
10div
>
11template
>
1213
<
template 
id="bar"
>
14<
div>
15<
p>the count of d is }
p>
16div
>
17template
>
1819
<
script
>
2021
//foo元件
22var
foo=
28},
29methods:34}
35};
3637
//bar元件
38var
bar=
44},
45created())49}
50}5152
//eventhub
53var
eventhub 
=new
vue();
5455
newvue(
61});
6263
script
>

整個原理是比較簡單的，總結一下要點：

1.foo元件是通過$emit(name,val)方法將資訊傳送出去，name表示傳送資訊的名字，val表示傳送的內容

2.然後bar元件裡通過$on(name,callback)裡獲取到foo元件傳送的內容，name表示foo元件傳送的資訊名字，callback表示乙個**函式，來執行獲取資訊後的一些操作

Vue 非父子元件之間的通訊

實現非父子元件之間的通訊，有以下幾種方式 第一種是最常用的，此處只介紹第一種。bus匯流排實現非父子元件之間的通訊 div id div script 建立乙個空的vue物件作為bus 事件匯流排 vue.prototype.bus new vue vue.component myheader vu...

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....