Vuejs 用$emit與$on來進行兄弟組件之間的數(shù)據(jù)傳輸通信
更新時間：2017年02月23日 16:03:54 作者：LiuYier
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實用價值，需要的朋友可以參考下。
最近在學習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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+django實現(xiàn)一對一聊天功能的實例代碼
這篇文章主要介紹了vue+django實現(xiàn)一對一聊天功能,主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2019-07-07
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù),localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
可能很多小伙伴之前都了解過?Vue2實現(xiàn)響應式的核心是利用了ES5的Object.defineProperty?但是面對面試官時如果只知道一些模糊的概念。只有深入底層了解響應式的原理，才能在關鍵時刻對答如流,本文就來和大家詳細聊聊，感興趣的可以收藏一下2022-12-12
本篇文章主要給大家詳細代碼講解了vue2.0 elementUI制作面包屑導航欄的過程，對此有興趣的朋友可以學習下。2018-02-02
這篇文章主要介紹了Vue3響應式對象Reactive和Ref的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)手機端省市區(qū)區(qū)域選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue+FormData+axios實現(xiàn)圖片上傳功能
這篇文章主要為大家學習介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能，本文為大家整理了詳細步驟，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了vue做移動端適配最佳解決方案(親測有效)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了關于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vite 是一個面向現(xiàn)代瀏覽器的更輕,更快的web應用開發(fā)工具,下面這篇文章主要給大家介紹了關于如何使用vite搭建vue3項目的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07