最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
时间:2017-04-30 编辑:简简单单 来源:一聚教程网
最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记。
代码如下 | 复制代码 |
//准备一个空的实例对象 varEvent =newVue();
//组件A varA = { template: `
我是A组件的数据->{{a}}
`, methods: { send () { Event.$emit("a-msg",this.a); } }, data () { return{ a:"我是a组件中数据" } } }; //组件B varB = { template: `
我是B组件的数据->{{a}}
`, methods: { send () { Event.$emit("b-msg",this.a); } }, data () { return{ a:"我是b组件中数据" } } }; //组件C varC = { template: `
我是C组件接收过来A的数据为: {{a}} 接收过来B的数据为: {{b}}
`, mounted () { //接收A组件的数据 Event.$on("a-msg",function(a) { this.a = a; }.bind(this));
//接收B组件的数据 Event.$on("b-msg",function(a) { this.b = a; }.bind(this)); }, data () { return{ a:"", b:"" } } }; window.onload =function() { newVue({ el:"#box", components: { "dom-a": A, "dom-b": B, "dom-c": C } }); };
|
相关文章
- vue.js实现请求数据的方法示例 03-19
- js中有效提高数据访问速度的方法 12-29
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31