Vuejs 用$emit與$on來進行兄弟組件之間的數(shù)據(jù)傳輸通信
更新時間：2017年02月23日 16:03:54 作者：LiuYier
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實用價值，需要的朋友可以參考下。
最近在學(xué)習(xí)vue組件雞組件之前通信問題，正好看到，以此來留作筆記。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2-單一事件管理組件通信</title>
<script src="vue.js"></script>
<script type="text/javascript">
//準備一個空的實例對象
var Event = new Vue();
//組件A
var A = {
template: `
<div>
<span>我是A組件的數(shù)據(jù)->{{a}}</span>
<input type="button" value="把A數(shù)據(jù)傳給C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("a-msg", this.a);
}
},
data () {
return {
a: "我是a組件中數(shù)據(jù)"
}
}
};
//組件B
var B = {
template: `
<div>
<span>我是B組件的數(shù)據(jù)->{{a}}</span>
<input type="button" value="把B數(shù)據(jù)傳給C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("b-msg", this.a);
}
},
data () {
return {
a: "我是b組件中數(shù)據(jù)"
}
}
};
//組件C
var C = {
template: `
<div>
<h3>我是C組件</h3>
<span>接收過來A的數(shù)據(jù)為: {{a}}</span>
<br>
<span>接收過來B的數(shù)據(jù)為: {}</span>
</div>
`,
mounted () {
//接收A組件的數(shù)據(jù)
Event.$on("a-msg", function (a) {
this.a = a;
}.bind(this));
//接收B組件的數(shù)據(jù)
Event.$on("b-msg", function (a) {
this.b = a;
}.bind(this));
},
data () {
return {
a: "",
b: ""
}
}
};
window.onload = function () {
new Vue({
el: "#box",
components: {
"dom-a": A,
"dom-b": B,
"dom-c": C
}
});
};
</script>
</head>
<body>
<div id="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了在Vue.js中使用Mixins的方法，Vue的Mixins是非常實用的編程方式，可以使代碼變得容易理解，有興趣的一起來了解一下2017-09-09
這篇文章主要介紹了vue和thymeleaf相結(jié)合的注意事項詳解,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹了vue3實現(xiàn)旋轉(zhuǎn)圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了詳解Vue 如何監(jiān)聽Array的變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
vue3 onMounted異步函數(shù)同步請求async/await實現(xiàn)
這篇文章主要為大家介紹了vue3 onMounted初始化數(shù)據(jù)異步函數(shù)/同步請求async/await實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源
本篇文章主要介紹了詳解vue-cli與webpack結(jié)合如何處理靜態(tài)資源，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式
這篇文章主要介紹了vue?點擊按鈕?路由跳轉(zhuǎn)指定頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04