网站登录流程图,宁波工业设计公司排名,网站收录突然减少,精准客源引流平台$emit和$on进行组件之间的传值 注意#xff1a;emit和emit和emit和on的事件必须在一个公共的实例上#xff0c;才能够触发 需求#xff1a;
1.有A#xff0c;B#xff0c;C三个组件#xff0c;同时挂载到入口组件中
2.将A组件中的数据传递到C组件#xff0c;再将…$emit和$on进行组件之间的传值 注意emit和emit和emit和on的事件必须在一个公共的实例上才能够触发 需求
1.有ABC三个组件同时挂载到入口组件中
2.将A组件中的数据传递到C组件再将B组件中的数据传递到C组件
!DOCTYPE html
html langen
headmeta charsetUTF-8 /titleVue2-单一事件管理组件通信/title/head
bodydiv idappdom-a/dom-adom-b/dom-bdom-c/dom-c /divscript srcvue.js/scriptscript//准备一个空的实例对象var Event new Vue();console.log(Event);//组件Avar A {template: divspan我是A组件的数据-{{a}}/spaninput typebutton 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: divspan我是B组件的数据-{{a}}/spaninput typebutton value把B数据传给C click send/div,methods: {send () {Event.$emit(b-msg, this.a);}},data () {return {a: 我是b组件中数据}}};//组件Cvar C {template: divh3我是C组件/h3span接收过来A的数据为: {{a}}/spanbrspan接收过来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
