Vue组件之间数据通信12种方式
Vue2-第二版-后台管理系统项目实战/vue+element-ui/vue经典全套系统案例讲解_哔哩哔哩_bilibili
目录
1、父组件向子组件传递数据 props
2.子组件向父组件传递数据（$emit的用法）
3.兄弟组件通信
4、ref / $refs
5、eventBus事件总线（$emit / $on）
6、依赖注入（provide / inject）
7.$parent / $children
8. $children
9. $root
10.vuex
11. $attrs / $listeners
1、父组件向子组件传递数据 props
父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信
props的特点：
- props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
代码演示
父组件：
// 父组件
子组件：
// 子组件
{{msg}}
2.子组件向父组件传递数据（$emit的用法）
$emit的特点：
- $emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数
用法：
父组件：
// 父组件
{{currentIndex}}
子组件：
//子组件
{{item}}
3.兄弟组件通信
兄弟组件通信可以借助父组件交互
A组件 B组件
1. A组件数据传递给共同的父组件 再有父组件接受后传递给B组件
2. 通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。
4、ref / $refs
这种方式也是实现父子组件之间的通信
ref：这个属性用在子组件上，它的用用就指向了子组件的实例，可以通过实例来访问组件的数据和方法
用法：
在子组件中：
export default {
data () {
return {
name: 'JavaScript'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}
在父组件中：
调用子组件使用ref 获取子组件实例
5、eventBus事件总线（$emit / $on）
eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下：
vue事件总线（eventBus），通过创建一个空的vue实例作为全局事件总线，用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件
（1）创建事件中心管理组件之间的通信
// main.js
Vue.prototype.$bus = new Vue()
// child2
this.$bus.$emit('bus', 'bus传值,组件2传过来的')
// child2
this.$bus.$on('bus', (msg)=> {
console.log('msg', msg)
})
（2）发送事件 假设有两个组件home About
（3）接收事件
在上述代码中，这就相当于将count值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。
vue3不再使用 废除了
6、依赖注入（provide / inject）
这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法
用法：
父组件中：
provide() {
return {
num: this.num
};
}
子组件中：
inject: ['num']
还有另一种写法，这种写法可以访问父组件中的所有属性：
provide() {
return {
app: this
};
}
data() {
return {
num: 1
};
}
inject: ['app']
console.log(this.app.num)
7.$parent / $children
- 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。
- 使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。
用法：
子组件中：
{{message}}
获取父组件的值为: {{parentVal}}
8. $children
父组件中：
{{msg}}
在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。
注意：
通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例
在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组
$children 的值是数组，而 $parent是个对象
9. $root
挂在2在根组件实例上的data数据 ---不推荐
子组件通过this.$root.xxx 可以访问
任意子组件访问
10.vuex
11. $attrs
12. $listeners
$attrs
用于父组件给孙组件传递数据
$listeners
用于孙组件给父组件传递数据
考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给C组件传递数据，这种隔代传数据的情况该使用哪种方式呢？
如果是用props/ $emit 来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用vuex，如果仅仅是传递数据，那可能有点浪费了。
针对上述情况，vue引入了 $attrs / $listeners，实组件之间的跨代通信。
$attrs：继承所有的父组件属性（除了props传递的属性、class 和 style），一般用在子组件的子元素上
$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
$attrs / $listeners的用法：
parent组件
son1组件
Son2组件
在上述代码中：
- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性
- 在B组件中通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）