一.父传子 子组件通过props属性接收
// 在子组件内定义组件接收一个参数 name
{
props: ['name']
}
// 父组件使用组件时传递参数 name
<child :name="name"></child>
二.子传父 通过$emit 传递数据给父元素
// 子组件定义事件
this.$emit('事件名称', '传递的参数') //例: this.$emit('add', 111)
// 父组件监听事件的触发
<child @事件名称="事件触发的方法"/>
三.任意组件间通信
1.全局事件总线
// 定义事件总线
let bus = new Vue()
Vue.prototype.bus = bus
或者在入口文件的new vue实例的时候在里面放入一个初始化钩子
Vue.prototype.$bus=this
// 定义发送事件
this.bus.$emit('事件名称', data)
// 定义接收事件 并在回调中接收参数
this.bus.$on('事件名称', (data) => {
})
2.消息订阅与发布(pubsub)
步骤
一 、安装pubsub: npm