vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信
生活随笔
收集整理的這篇文章主要介紹了
vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
$emit和$on進(jìn)行組件之間的傳值
注意：emit和emit和emit和on的事件必須在一個(gè)公共的實(shí)例上，才能夠觸發(fā)
需求：
? 1.有A，B，C三個(gè)組件，同時(shí)掛載到入口組件中
? 2.將A組件中的數(shù)據(jù)傳遞到C組件，再將B組件中的數(shù)據(jù)傳遞到C組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>Vue2-單一事件管理組件通信</title></head> <body><div id="app"><dom-a></dom-a><dom-b></dom-b><dom-c></dom-c> </div><script src="vue.js"></script><script>//準(zhǔn)備一個(gè)空的實(shí)例對象var Event = new Vue();console.log(Event);//組件Avar A = {template: `<div><span>我是A組件的數(shù)據(jù)->{{a}}</span><input type="button" value="把A數(shù)據(jù)傳給C" @click = "send"></div>`,methods: {send () {alert(1);console.log(this);Event.$emit("a-msg", this.a);}},data () {return {a: "我是a組件中數(shù)據(jù)"}}};//組件Bvar 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ù)"}}};//組件Cvar C = {template: `<div><h3>我是C組件</h3><span>接收過來A的數(shù)據(jù)為: {{a}}</span><br><span>接收過來B的數(shù)據(jù)為: {}</span></div>`,mounted () {alert(2);//接收A組件的數(shù)據(jù)Event.$on("a-msg", (a)=> {this.a = a;});//接收B組件的數(shù)據(jù)Event.$on("b-msg", (b)=> {this.b = b;});},data () {return {a: "",b: ""}}};new Vue({el: "#app",components: {'dom-a':A,'dom-b':B,'dom-c':C}});</script></body> </html>總結(jié)
以上是生活随笔為你收集整理的vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用MySQL语言创建视图_mysql 创
- 下一篇： Print() 语句以及数字赋值语句 中