Vue的组件通信方式

父传子

方式一：

传值父组件： :name = “name”
接收子组件： props[‘name’]

方式二：

传值父组件： mounted中 this.$refs.ref.value = *
接收子组件： data中 value = " "

子传父

方式一：

传值子组件： this.$emit(‘event’,value)
接收父组件： @event()

方式二：

传值子组件: mounted中 this.$parent.value = ’ ’
接收父组件： data中 value = " "

注：使用此方式传值，也可以用$emit传事件，父组件使用$on接收（监听自定义函数）
传值子组件： mounted中 this.$parent.$emit (‘event’)
接收父组件： mounted中 this.$on(‘event’ , function() )

兄弟组件传值

新建一个空的Vue实例对象
传值组件： 引入bus.js文件
bus.$emit{(}^{\prime }even{t}^{\prime },value)接收组件：引入bus文件bus.$on(‘event’, function())

跨级组件通信

传值组件： provide() {
return {
key: value
}
}
接收组件： inject[‘key’] // key可使用{{}}获取