vue-组件通信(二)
个人主页：前端青山
系列专栏：Vue篇
人终将被年少不可得之物困其一生
依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二)
目录
组件通信(二)
（1） props / $emit
1. 父组件向子组件传值
2. 子组件向父组件传值
（2）eventBus事件总线（$emit / $on）
（3）依赖注入（provide / inject）
（3）ref / $refs
（4）$parent / $children
（5）$attrs / $listeners
（6）总结
组件通信(二)
组件通信的方式如下：
（1） props / $emit
父组件通过props向子组件传递数据，子组件通过$emit和父组件通信
1. 父组件向子组件传值
-
props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。 -
props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。 -
props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式
父组件
子组件
{{msg}}
复制代码2. 子组件向父组件传值
-
$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。
父组件
{{currentIndex}}
复制代码子组件
{{item}}
复制代码（2）eventBus事件总线（$emit / $on）
eventBus事件总线适用于父子组件、非父子组件等之间的通信，使用步骤如下： （1）创建事件中心管理组件之间的通信
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
复制代码（2）发送事件 假设有两个兄弟组件firstCom和secondCom：
在firstCom组件中发送事件：
复制代码（3）接收事件 在secondCom组件中发送事件：
求和: {{count}}
复制代码在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。
虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。
（3）依赖注入（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)
复制代码注意： 依赖注入所提供的属性是非响应式的。
（3）ref / $refs
这种方式也是实现父子组件之间的通信。
ref： 这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。
在子组件中：
export default {
data () {
return {
name: 'JavaScript'
}
},
methods: {
sayHello () {
console.log('hello')
}
}
}
复制代码在父组件中：
（4）$parent / $children
-
使用
$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法） -
使用
$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。
在子组件中：
{{message}}
获取父组件的值为: {{parentVal}}
复制代码在父组件中：
// 父组件中
{{msg}}
在上面的代码中，子组件获取到了父组件的parentVal值，父组件改变了子组件中message的值。 需要注意：
-
通过
$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例 -
在组件中使用
$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的 -
在根组件
#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组 -
$children的值是数组，而$parent是个对象
（5）$attrs / $listeners
考虑一种场景，如果A是B组件的父组件，B是C组件的父组件。如果想要组件A给组件C传递数据，这种隔代的数据，该使用哪种方式呢？
如果是用props/$emit来一级一级的传递，确实可以完成，但是比较复杂；如果使用事件总线，在多人开发或者项目较大的时候，维护起来很麻烦；如果使用Vuex，的确也可以，但是如果仅仅是传递数据，那可能就有点浪费了。
针对上述情况，Vue引入了$attrs / $listeners，实现组件之间的跨代通信。
先来看一下inheritAttrs，它的默认值true，继承所有的父组件属性除props之外的所有属性；inheritAttrs：false 只继承class属性 。
-
$attrs：继承所有的父组件属性（除了prop传递的属性、class 和 style ），一般用在子组件的子元素上 -
$listeners：该属性是一个对象，里面包含了作用在这个组件上的所有监听器，可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）
A组件（APP.vue）：
//此处监听了两个事件，可以在B组件或者C组件中直接触发
B组件（Child1.vue）：
props: {{pChild1}}
$attrs: {{$attrs}}
C 组件 (Child2.vue)：
props: {{pChild2}}
$attrs: {{$attrs}}
在上述代码中：
-
C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了
$listeners属性 -
在B组件中通过v-bind 绑定
$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）
（6）总结
（1）父子组件间通信
-
子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
-
通过 ref 属性给子组件设置一个名字。父组件通过
$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信。 -
使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
（2）兄弟组件间通信
-
使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
-
通过
$parent/$refs来获取到兄弟组件，也可以进行通信。
（3）任意组件之间
-
使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。