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