Vue组件之间通信的几种方式

Vue是数据驱动视图的一个前端框架，所以说对于Vue来说，组件之间的通讯方式非常重要。通讯方式按照组件之间的关系分为父子组件之间通讯，非父子组件之间通讯(兄弟组件，隔代组件)

　　总结来说：

　　　　父子组件通信: props/$emit； $parent/$children；provide/inject；ref ；$attrs/$listeners

　　　　兄弟组件通信: eventBus 

　　　　跨级通信:  eventBus；provide/inject；$attrs/$listeners

　　　　此外H5中的本地存储localStorage,sessionStorage可用于组件之间通信，Vue中的插槽(slot)，Vuex也是组件之间通信的方式，这些在此不多赘述。

1.props和$emit

　　父组件向子组件传值：

// 父组件
<template>
  <div>
    <Childcomp :movies="moviesList"></Childcomp>
  </div>
</template>

<script>
import Childcomp from './childcomp.vue'
export default {
  components: { Childcomp },
  data() {
    return {
      moviesList: ['醉拳', '快餐车', '我是谁']
    }
  }
}
</script>

// 子组件 
<template>
  <div>
    <span v-for="(item, index) in movies" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['movies']
}
</script>

　　props只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。

　　子组件向父组件传值：

// 父组件
<template>
　　<div>
　　　　<Childcomp @getMoviesList='getMoviesList'></Childcomp>
　　　　<span v-for="(item, index) in moviesList" :key="index">{{item}}</span>
　　</div>
</template>

<script>
import Childcomp from './childcomp.vue'
export default {
　　components: { Childcomp },
　　data(){
　　　　return{
　　　　　　moviesList:[]
　　　　}
　　}
　　methods:{
　　　　getMoviesList(val){
　　　　　　this.moviesList = val　
　　　　}
　　}

}
</script>

// 子组件 
<template>
　　<div>
　　　　<button @click="getMoviesList"></button>
　　</div>
</template>

<script>
export default {
　　data(){
　　　　return(){
　　　　　　moviesList:['简单任务','警察故事','红番区']
　　　　}
　　},
　　methods:{
　　　　getMoviesList(){
　　　　　　this.$emit('getMoviesList',{
　　　　　　　　moviesList
　　　　　　})
　　　　}
　　}

}
</script>

2.$parent和$chilren

　　指定已经创建的父实例，在两者之间建立父子关系，子实例可以用this.$parent访问父实例，子实例被推入到父实例的this.$children数组中。

　　官方建议：节制的使用此方法，它们是父子通信的应急方法，推荐用props和$emit通信

　　该方法描述为可以访问到实例。也就是说可以拿到实例中的data和methods.

// 父组件
<template>
  <div>
    <div>父组件的值：{{fatherdata}}</div>
    <Childcomp></Childcomp>
    <button @click="changeChild">点击改变子组件值</button>
  </div>
</template>

<script>
import Childcomp from './child.vue'
export default {
  components: { Childcomp },
  data() {
    return {
      fatherdata: '父组件的值'
    }
  },
  methods: {
    changeChild() {
      // 获取到子组件
      this.$children[0].childdata = '子组件的值修改成功'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <span>子组件的值为：{{childdata}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childdata: '子组件中的值'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.fatherdata;
    }
  }
}
</script>

　　$parent和$children的值不一样，$children 的值是数组，而$parent是个对象

3.ref和refs

　　ref用在子组件上，引用指向组件实例，可以通过实例直接调用组件的方法或访问数据。

// 子组件
<template>
  <div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childdata: '子组件中的值'
    }
  },
  methods:{
    say(){
      console.log('子组件中的say方法')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <Childcomp ref="child"></Childcomp>
  </div>
</template>

<script>
import Childcomp from './childcomp.vue'
export default {
  components: { Childcomp },
　mouted(){
      console.log(this.$refs.child.childdata);  // 
      this.$refs.child.say();  // 
　}
}
</script>

4.provide和inject

　　简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过inject来注入变量。

　　这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中取数据

　　假如说有三个组件One.vue，Two.vue，Three.vue

// One.vue
<template>
  <div>
    <Twocomp></Twocomp >
  </div>
</template>

<script>
  import Twocomp from './Two.vue'
  export default {
    provide: {
      data: "one"
    },
    components:{
      Twocomp
    }
  }
</script>

// Two.vue
<template>
  <div>
    <Threecomp></Threecomp>
　　<span>{{newdata}}</span>
  </div>
</template>

<script>
  import Threecomp from './Three.vue'
  export default {
    components:{
      Threecomp
    },
　　 inject:['data'],
　　 data(){
　　　　return{
　　　　　　newdata:this.data
　　　　}
　　 },

  }
</script>

// Three.vue
<template>
  <div>
　　<span>{{newdata}}</span>
  </div>
</template>

<script>
  export default {
　　 inject:['data'],
　　 data(){
　　　　return{
　　　　　　newdata:this.data
　　　　}
　　 },

  }
</script>

5.$attrs和$listeners

隔代组件传值：

　　使用props绑定来进行一级一级的信息传递, 如果后代组件中状态改变需要传递数据给父组件， 使用事件系统一级级往上传递

　　使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低

　　使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.

为此，引入了$attrs 和$listeners ， 新增了inheritAttrs 选项。

　　包含了父作用域中不作为prop 被识别 (且获取) 的特性绑定 (class和 style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style除外)，并且可以通过 v-bind="$attrs" 传入内部组件，在创建高级别的组件时非常有用。

　　$attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件的props中了），在子组件中的$attr会把声明的prop剔除。

// 父组件
<Childcomp class="com" name="attr" :a="a" :b="b" :c="c"></Childcomp>
...
data() {
  return {
    a: 'Hello a!',
    b: 'Hello b!',
    c: 'Hello c',
  }
},
...

// Childcomp.vue
 export default {
  components: {
    Childcomp2
  },
  created() {
    console.log(this.$attrs) // {name: "attr", a: "Hello a!", b: "Hello b!", c: "Hello c"}
  }
}

如果子组件声明了prop，$attrs中与$props相同的属性会被移除

// Childcomp.vue
 export default {
  components: {
    Childcomp2
  },
  props:['a'],
  created() {
    console.log(this.$attrs) // {name: "attr", b: "Hello b!", c: "Hello c"}
  }
}

如果Childcomp里的子组件还用到数据a，可以继续将数据a传给子组件,同时可以通过 v-bind="$attrs" 将Childcomp从父组件获取到的数据传递到Childcomp里的子组件。

　　$listeners是组件的内置属性，它的值是父组件(不含.native修饰器的) v-on事件监听器。

　　组件可以通 过在自己的子组件上使用v-on=”$listeners”，进一步把值传给自己的子组件。如果子组件已经绑定$listener中同名的监听器，则两个监听器函数会以冒泡的方式先后执行。

6.eventBus

　　eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。

　　eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

使用方法：

　　1.创建事件总线导出：

import Vue from 'vue'
export const EventBus = new Vue()

　　在兄弟组件中分别引入EventsBus

　　2.发送事件　

<template>
  <div>
    <button @click="add">+</button>    
  </div>
</template>

<script>
import {EventBus} from './Eventbus.js'
export default {
  data(){
    return{
      num:1
    }
  },

  methods:{
    add(){
      EventBus.$emit('addnum', {
        num:this.num++
      })
    }
  }
}
</script>

　　3.接收事件

<template>
  <div>计算和: {{count}}</div>
</template>

<script>
import { EventBus } from './Eventbus.js'
export default {
  data() {
    return {
      count: 0
    }
  },

  mounted() {
    EventBus.$on('addnum', {num} => {
      this.count = this.count + num;
    })
  }
}
</script>