总结vue组件之间的通信

vue组件之间的通信

1、父子组件通信

父组件通过v-bind绑定一个数据传递给子组件，子组件通过props接收到就可以在子组件的html中使用

子组件通过this.$emit(“event”，data)发送数据，父组件通过@event = "(val)=>{}"来接受数据

2、兄弟组件通信(事件车)

• bus事件车

  bus事件车可以用于兄弟组件之间通信，也可以用于更加广泛

方式1:

bus/index.js

//方式1:
import  Vue from "vue"
//事件车实例
export default new Vue()
//方式2 （官方一点）
import Bus from 'vue';
let install = function (Vue) {
  Vue.prototype.$bus = new Bus()
}
export default { install };

兄弟组件：

方式2：

vue实例也可以定义在main.js中国原型上，更加简洁

Vue.proyotype.$bus = new Vue()

使用：

3、$attrs和$listeners

$attrs：包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件。当一个组件没有声明任何 props 时，它包含所有父作用域的绑定 (class 和 style 除外)。

$listeners：包含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件。它是一个对象，里面包含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。

• $attrs的用法

$attrs就是一个容器对象，这个容器对象会存放:父组件传过来的且子组件未使用props声明接收的数据

爷组件传递给孙组件的逻辑流程

其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接收，那么爷组件传递给父组件的数据就会存放到父组件的$attrs对象中里面了，然后，再通过v-bind="$attrs"，再把这个$attr传递给孙组件，在孙组件中使用props就能接收到$attrs中的数据了，这样就实现了，祖孙之间的数据传递。

祖孙之间的数据传递，需要通过中间的父组件$attrs做一个桥梁。其实就是这个意思。

$attrs一般搭配interitAttrs 一块使用，一般是inheritAttrs: false, // 默认会继承在html标签上传递过来的数据.这个大家审查一下DOM元素就能看到了。

• $listeners的用法

  使用$listeners可以实现孙组件的数据传递到爷组件中去，的话，也是用在中间的桥梁父组件上面去，$listeners`可以将子组件emit的方法通知到爷组件

在中间的父组件中加上$listenners*

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

• inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性

4、provide-inject

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

跨组件传递数据，无论组件多深

//想后代组件提供数据，不会监听数据变化
provide(){    //和data同级
   return{
     //vue的实例属性$options是用来获取定义在data外的数据和方法的
     name:this.$options.name,
     auther:"zxc",
     count:0
  }
}

数据注入组件

inject:['name','auter','count']

5、插槽特殊情况下也可做 组件通信

子组件

<slot name="abc" msg="hello" :data="{name:'zxc'}">默认内容</slot>

父组件：

<templete #abc="obj" >   //obj得值：{msg："hello",data:{name:"zxc"}}
<templete #abc="{msg}" >   //v-slot:abc  的简写  {msg} 对值的解构   
  	<p>{{msg}}</p>
</templete>

6、VueX