vue组件通信

（1） props / $emit

父组件通过props向子组件传递数据，子组件通过$emit和父组件通信

1. 父--->子

• props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件不断更新。
• props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。
• props属性名规则：若在props中使用驼峰形式，模板中需要使用短横线的形式

2,子--->父

$emit绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。

父组件给子组件绑定事件（v-on:test=”fn”），并定义回调函数，子组件通过this.$emit(test)触发父组件中的回调函数

（2）eventBus事件总线（emit/on）

eventBus事件总线适用于父子组件、非父子组件等之间的通信，

1,安装全局事件总线

 2,接收方：往总线上绑定事件，并定义回调函数

 3,发送方：往总线上触发事件，并传递参数

 

最好在beforeDestroy钩子中解绑当前组件所用到的事件

（3）依赖注入（project / inject）

用于父子组件之间的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方法来进行传值。就不用一层一层的传递了。

注意： 依赖注入所提供的属性是非响应式的。

project / inject是Vue提供的两个钩子，和data、methods是同级的。并且project的书写形式和data一样。

• project 钩子用来发送数据或方法
• inject钩子用来接收数据或方法

（4）ref / $refs

这种方式也是实现父子组件之间的通信。

ref： 这个属性用在子组件上，它的引用就指向了子组件的实例。可以通过实例来访问组件的数据和方法。

父组件：在子组件的实例化标签中打标识ref=’xxx’,就可以通过this.$refs.xxx操作子组件上的数据和方法

 子组件不需要做任何操作：

 （5）parent/children

• 使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）
• 使用$children可以让组件访问子组件的实例，但是，$children并不能保证顺序，并且访问的数据也不是响应式的。

子组件中使用$parent访问父组件的数据和方法：

 父组件中使用$children访问子组件的数据（非响应式）和方法：

需要注意：

• 通过$parent访问到的是上一级父组件的实例，可以使用$root来访问根组件的实例
• 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的
• 在根组件#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组
• $children 的值是数组，而$parent是个对象 

（5）attrs/listeners

Vue引入了$attrs / $listeners，实现组件之间的跨代通信。

inheritAttrs：

父组件传递的props参数，如果子组件没有声明接收（props:[]）：

如果inheritAttrs为true，则这些没有声明的属性变为子组件根元素上的html属性

如果inheritAttrs为false,则没有声明的props属性不会变为html的属性

$attrs

$attrs保存了绑定在组件上不被识别为props的所有属性（没有声明接收的props）(class 和 style 除外)

不论inheritAttrs是true还是false，子组件的$attrs都能接收到未声明的props

通过v-bind=‘$attrs’，可以把本组件的$attrs传递给子组件

$listeners

它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）

把父组件的事件传递给子组件，子组件可以触发父组件中的回调

总结：

父组件：props传参，传递自定义事件（test）,定义回调函数fn

<template>

<child  name:’hhh’ age：’18’@test=”fn”><child/>

<template/>

子组件：没有声明接收的props参数在$attrs中，把$attrs传递给孙组件, （name,age）

并通过 v-on=”$listeners” 把子组件的事件监听器给孙组件，孙组件 可以触发test事件

<template>

<sun v-bind="$attrs" v-on="$listeners"><sun/>

<template>

孙组件可以直接使用数据（name,age）,也可以触发事件 this.$emit(test)