详解vue中的组件通信的几种方式(一)

 在另一篇文章我们会谈及祖父孙三级之间的通信,传送门:vue组件通信的方式(二)

1.父组件向子组件传值(绑定属性):

首先我们定义一个父组件father.vue:



子组件son.vue:



2.子组件向父组件传值($emit触发自定义事件),如上图

3.兄弟组件传值(定义一个vue空实例作为桥梁):

首先我们在main.js中定义vue空实例

//创建vue空实例
let hub=new Vue()
Vue.prototype.$eventhande = hub //加入vue原型中,让所有组件可以访问到该对象

然后在定义一个兄弟组件brother.vue:



然后我们在另外一个兄弟组件接受该值就OK了,如图1和图2的father.vue,和son.vue

你可能感兴趣的:(vue)