父子通信
props配置项 父向子通信
@自定义事件 子向父通信
作用域插槽 子向父通信
通过ref来给标签打标识，然后在父组件中直接使用this.$refs.xxx 来获取子组件中的标签，然后在子组件中为标签绑定相应事件，通过在父组件中执行标签事件（如：this.$refs.inputDom.focus()），并传递相应参数，便可以实现父向子传值。同理，用返回值接受函数执行的结果，也是可以实现子向父传值的。
$parent 属性，在子组件中可以直接访问该组件的父实例或组件。 (特别注意：第三方组件库中的$parent可能仍然是一个第三方组件！可以通过 $parent的$el属性在控制台中看到 )
$root 属性，获取根组件对象，一般都是App.vue。
$children 属性，获取所有子组件的数组，注意：子组件消失与出现可能会改变其他子组件的下标！
通过这3个属性，可以很方便的进行父子间通信，同时也可以实现子组件对父组件数据的修改，但是这样做可能会引起后续维护上的困难，一般不推荐使用。
provide/inject : 依赖注入，对于祖先组件对子组件传值，可以使用 provide 和 inject，正常inject是无法修改的，但是我们可以把传递的数据改为引用值，或把祖先组件的vc对象（即this指向的对象）直接传给子组件。
这个方法对于多个子组件控制祖先组件弹出层的开启/关闭、传递标题信息十分方便
v-model 父子组件通信
//--------父组件
<template>
<div>
<!-- 在父组件中对子组件使用用v-model相当于，v-bind绑定了value，以及执行了v-on:input事件 -->
<childv-model="flag"></child>
<div>{
{flag}}</div>
</div>
</template>
//--------子组件
<script>
exportdefault {
// 用props接收父组件传递的value值，从而实现双向数据绑定
props: ["value"],
methods: {
// 通过$emit触发父组件的input事件，并将第二个参数作为值传递给父组件
confirm () {
this.$emit('input', false)
}
}
}
</script>非父子通信
并不是说一定要是非父子才行，而是指父子组件或非父子组件，都可以通过这些方式进行通信。
事件总线
1. 设置全局可用的事件总线
// main.js
newVue({
beforeCreate() {
Vue.prototype.$bus=this
},
render: h=>h(App)
}).$mount('#app')2. 为接收方绑定接收事件
<script>
// 接收方 mounted声明周期钩子中：
mounted() {
// Bus-1 是监听的事件名 msg是发送方传递的参数
this.$bus.$on('Bus-1', (msg) => {
console.log(msg)
})
}
</script>3. 为发送方绑定发送事件
<script>
// 发送方 这里是绑定在了一个button的click事件上
methods: {
// sendMsg 是btn点击事件的回调函数
sendMsg() {
// Bus-1 是触发的事件名 后面是传递的信息
this.$bus.$emit('Bus-1', '发送的信息：我是userInfo')
}
}
</script>虽然很遗憾，但是事件总线在Vue3中被删除了，Vue3删除了$on 、$off 和 $once 方法 ，开发团队推荐我们使用第三方库来实现组件通信。
2.第三方库实现组件通信
可以实现组件通信的第三方库有很多，这里以 pubsub.js 举例。
安装pubsub
npm i pubsub-js在main.js中全局引入pubsub
import PubSub from 'pubsub-js'接收方订阅消息
mounted() {
// 第一个 pubsub-1 是订阅的消息名
PubSub.subscribe('pubsub-1', (subName, msg) => {
console.log(subName) // pubsub-1 这个是回调函数的消息名 默认第一个参数
console.log(msg) // 这个才是接收的数据！
})
}
`重点强调：接收方使用 subscribe 方法接收消息，回调函数的第一个参数都是消息名`发送方发布消息
methods: {
// sendMsg 是btn按钮点击事件触发的回调函数
sendMsg() {
// 发布消息：pubsub-1是发布的消息名 和接收方订阅的消息名必须一致！
PubSub.publish('pubsub-1', '我是传递的数据：Hello')
}
}
3.Vuex通信
通过state传递公共数据