這是最常用的元件通訊方式，適用於父子元件間資料傳遞
適用場景
巢狀的多層父子元件（只有父子元件兩個建議使用props和$emit
基本步驟
**示例
從這裡可以看到katex parse error: expected '}', got 'eof' at end of input: … this.emit(『getcdata』, 『111』)
}` 會觸發getcdata事件，在b和a元件中都監聽了該事件，從而每點選一次c元件文字，都會在控制太列印出相應的內容。如下圖所示
當元件不是父子元件關係，比如平行元件間資料通訊，或者有兩個平行元件a和b，a元件的子元件是c。a和c元件間的資料通訊可以使用**事件匯流排。
適用場景
非父子元件資料通訊
基本步驟
vue.component('a',
},methods:
},mounted()
})vue.component('b',
}})vue.component('c',
},methods:
},mounted() )
}})let bus = new vue()
let vm = new vue()
頁面效果如下圖
a元件中data函式定義了valuea：『我是a元件的值』，現在想把valuea展示在c元件文字框中。通過點選事件
my_click()使用bus.$emit傳遞出事件getadata和valuea的值。
在c元件的mounted階段使用bus.$on('getadata', val => )將傳遞來的valuea賦值給valuec從而將值在c元件中展示。
當c元件的值發生改變時a元件同樣能監聽到事件從而使文字框的值發生改變。
使用**事件匯流排進行資料通訊時，需要在同乙個vue例項中使用$on監聽事件和$emit來觸發事件。上述**中的事件監聽和傳遞都是在vm例項中的。
在vue中元件間通訊還有更多其他方式比如使用$parent,$children,或者使用父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數。不論子元件有多深，只要呼叫了inject那麼就可以注入provider中的資料。而不是侷限於只能從當前父元件的prop屬性來獲取資料，只要在父元件的生命週期內，子元件都可以呼叫。（這兩種很少使用，故不多作贅述）以及針對大型專案中vuex都能實現元件間通訊。
上面講述的三種元件間通訊方式基本滿足日常開發需求，根據具體場景選擇合適的方式即可。
vue元件間通訊方式
一 props emit 將要傳遞的引數繫結到元件上，子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸，想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...
vue 元件間通訊總結
父 子元件通訊 1.props 此處不區分是否加引號，若不bind，皆作字串處理，否則作為表示式處理 若傳入物件，則子元件上的該物件與父元件中的該物件指向同乙個位址，如果希望對傳入的物件進行修改且不影響父元件，則需要看情況對其進行深 淺拷貝 若傳入的屬性在父元件中會發生變化，則將其放置在子元件的co...
vue元件間方式總結
bus的使用 可以用於兄弟元件間或者無關係的元件間通訊 1 在main.js中 vue.prototype.bus new vue 2 a.vue檔案中 this.bus.emit msg 10000 event.emit msg this.msg 傳送資料，第乙個引數是傳送資料的名稱，接收時還用這...