vue中组件的通信方式

在vue项目开发中，组件之间进行数据传递，是必不可少的，那么今天就来总结一下vue中组件通信的集中方式。

一、父子组件之间传递数据

父子组件之间的数据传递分为父传子和子传父。
父传子：
1.props传递
在父组件调用子组件时传递一个prop

<child :title="title"></child>

对应的在子组件去接收这个prop

export default {
  props: ['title']
}

一般来说，不推荐在子组件中修改prop的值，会导致数据流向混乱，如果要修改，请将这个值保存到data中
有些情况下，需要双向绑定prop，请使用this.$emit('update:title', newTitle)触发prop的更新，然后在父组件中去监听这个emit

<child :title="title" @update:title="title=$event"></child>
// 可以简写为
<child :title.sync="title"></child>

2.props传递数据十分方便，缺点在于有多层组件嵌套时，需要每一级都使用prop传递和接收，很是麻烦。vue2.4提供attrs和listeners解决这个问题。
attrs接收父级作用域所有非prop和非class,style传递的属性,在内部组件中通过v-bind="$attrs"
listeners属性中包含了父作用域中b不含.native修饰符的所有v-on监听器，使用v-bind="$listeners"传递给内部组件，这两个属性在创建高级组件时十分有用
3.provide和inect
父组件通过provide来提供变量，子组件通过inject注入变量
4.父组件通过v-model默认传递一个value的prop，在子组件中触发一个emit('input', value)改变父组件的值
5.parent和$children