$emit和$on進行組件之間的傳值
注意:emit和emit和emit和on的事件必須在一個公共的實例上,才能夠觸發
需求:
? 1.有A,B,C三個組件,同時掛載到入口組件中
? 2.將A組件中的數據傳遞到C組件,再將B組件中的數據傳遞到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>//準備一個空的實例對象var Event = new Vue();console.log(Event);//組件Avar A = {template: `<div><span>我是A組件的數據->{{a}}</span><input type="button" value="把A數據傳給C" @click = "send"></div>`,methods: {send () {alert(1);console.log(this);Event.$emit("a-msg", this.a);}},data () {return {a: "我是a組件中數據"}}};//組件Bvar B = {template: `<div><span>我是B組件的數據->{{a}}</span><input type="button" value="把B數據傳給C" @click = "send"></div>`,methods: {send () {Event.$emit("b-msg", this.a);}},data () {return {a: "我是b組件中數據"}}};//組件Cvar C = {template: `<div><h3>我是C組件</h3><span>接收過來A的數據為: {{a}}</span><br><span>接收過來B的數據為: {{b}}</span></div>`,mounted () {alert(2);//接收A組件的數據Event.$on("a-msg", (a)=> {this.a = a;});//接收B組件的數據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>