vue组件间通信的6中方式（全）

方式一、 props / $emit

　　父组件铜鼓偶 props 向子组件传递数据，子组件通过 $emit 向父组件传递数据，在父组件中通过 v-on 接受。

　　不详细说明了，比较简单

方式二、$emit / $on 中央事件总线

　　这种方法通过一个空的 vue 实例作为中央事件总线，用它来触发事件和监听事件，可以实现任何组件间的通信，包括父子，兄弟，跨级。

　　　　（个人觉得不如直接使用vuex）

　　1.具体实现方式

      this.$emit('fun', data)
      this.$on('fun', data => {})

　　首先建立一个空的 Vue 实例，将通信事件挂载到该实例上

　　// ab.js
　　import Vue from 'vue'
　　export default new Vue()

　　兄弟组件a

　　import ab from './ab'
　　export default {
  　　name: "A",
  　　data() {
    　　return {
      　　name: 'zhangningA'
    　　}
  　　},
  　　mounted() {
    　　ab.$emit('aname', this.name)
  　　}
　　}

　　兄弟组件b

import ab from "./ab";
export default {
  name: "B",
  data() {
    return {
      name: 'zhangningB',
      getaname: ''
    }
  },
  mounted() {
    ab.$on('aname', data => {
      this.getaname = data
    })

  }
}

　　注：不推荐这种组件间传值的实现方式

 

方式三、vuex

　　参考另一篇博客  https://www.cnblogs.com/zhangning187/p/fendouzailushang2.html

 

方式四、provide / inject

　　在 vue 2.2.0 之后的版本中添加了 provide 和 inject 。他们成对出现，用于组件中传递数据。主要解决了跨级组件间的通信问题。

Root
  └─ List
      ├─ Item
      └─ Footer
          ├─ Button
          └─ Statistics

　　当这种深层次的结构，需要将 root 组件中的数据传递给 statistics 组件的时候，如果仍然使用 prop 沿着组件逐级传递下去可能会很麻烦。这个时候我们可以使用 provide 和 inject 进行传递数据。无论层次结构多深，父组件都可以作为其所有子组件的依赖者。父组件通过 provide 提供数据，子组件通过 inject 接收数据.

// root组件
export default {
  name: 'root',
  components: {
    List: () => import('./list')
  },
  data(){
    return {
      name: '我是tname'
    }
  },
  /*provide:{
    // 这里访问不到实例中的 property ，需要将 provide 转换为返回对象的函数
    tname: this.name
  }*/
  provide(){// 向子组件发送数据
    return {
      rootName: this.name
    }
  }
}    

 

// statistics组件
export default {
  name: 'statistics',
　// 接收父组件通过 provide 传递过来的数据
　inject:['rootName']
}

　　注：父组件不需要知道哪些子组件使用了它的 provide 的 property

　　　　子组件也不需要知道 inject 的 property 来自哪个父组件

　　解决响应式问题

　　　　将一个函数赋值给 provide 的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。

　　　　实际上这个函数存储了父组件实例的引用，所以每次子组件都能获取到最新的数据。

// 父组件
export default {
  name: 'index',
  components: {
    Aco: () => import('./a')
  },
  data() {
    return {
      name: '我是tname'
    }
  },
  provide() {// 向子组件发送数据
    return {
      // 传递组件的实例 this
      rootName: this,
　　　 getParentName: () => this.name

　　}
　}
}

　

// 子组件
export default {
  name: 'b',
  inject: ['name', 'getParentName'],
  computed: {
    // 接收数据
    parentName() {
      return this.getParentName()
    }
  }
}

 

 

方式五、$parent / $children 与 ref

　　ref：如果在普通的 dom 上使用，引用指向的就是 dom 元素，在子组件上使用，引用的就是组件实例

　　$parent / $children ：访问父子组件实例

　　　　这两种都是直接得到组件的实例，使用后可以直接调用组件中的方法或者数据。但是无法在跨级或兄弟组件间通信。理论上用的不太多

 

 

方式六、$attrs / $listeners

 　　多级组件嵌套需要传递数据时，通常使用vuex，但是如果仅仅时数据的传递，而不做中间的处理，有点大材小用了。vue 2.4 提供了另一种方法 $attrs / $ listeners

　　$attrs：存放的是负组件中绑定的非 props 属性

　　$listeners：存放的是负组件中绑定的非原生事件

　　详情查看这篇博客 ：https://www.cnblogs.com/zhangning187/p/vueapixxzj.html