vue2中几种组件通讯方式

在项目开发过程中避免不了的就是组件传值问题，列举一些vue2中常见的传值操作：

1.props传值（父传子）：在父组件中给子组件标签写上要传递的值和变量名，在子组件的props属性当中声明接收。接收的方式有两种，可以是数组也可以是对象。

// 父组件

<HelloWorld msg="Welcome to Your Vue.js App"/>

// 子组件

<h1>{{ msg }}</h1>

export default {
  name: 'HelloWorld',
  // props:['msg']  数组接收方式
  props: {
    msg: String
  }
}

2.$emit传值（子传父）：在子组件标签上面声明一个函数用来接收子组件传递过来的数据，子组件中需要使用this.$emit('变量名',值)的方式进行传值

// 父组件

<HelloWorld msg="Welcome to Your Vue.js App" @getSendData="getChildrenSendData" />

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    getChildrenSendData(e){
      console.log(e); // 3
    }
  }
}

// 子组件

<h1 @click="sendData">{{ msg }}</h1>

export default {
  name: 'HelloWorld',
  // props: ['msg']   数组形式接收
  props: {
    msg: String
  },
  methods:{
    sendData(){
      this.$emit('getSendData',3)
    }
  }
}

3.provide和inject（爷孙/后代）：在祖先组件中使用provide将需要传递的数据定义好，所有的后代组件都可以使用inject把引入需要的数据，注：此传值是非响应式的 。

// 祖先组件

export default {
  name: 'App',
  provide:{
    msg:"Welcome to Your Vue.js App"
  },
  components: {
    HelloWorld
  }
}

// 后代组件
<h1>{{ msg }}</h1>

export default {
  name: 'HelloWorld',
  inject:['msg']
}

4.全局事件总线（任意组件通信）：在vue的原型上面绑定一个全局变量将this对象赋值给它，使用$on绑定自定义事件，在需要使用的地方使用$emit触发事件，在组件销毁前需要使用$off解绑事件。具体操作方式参考：[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信_533_的博客-CSDN博客

5.pubsub-js消息订阅与发布（任意组件通信）：需要先安装pubsub-js插件，操作方法跟全局事件总线差不多，具体可参考：vue消息订阅与发布_iku_ki的博客-CSDN博客

6.vuex状态管理（任意组件通信）：需要先安装vuex（以下简称仓库），仓库里面有4个配置项，state是存放数据的地方，getters是对state数据处理并且返回新数据（类似计算属性），actions是用来处理操作的地方（异步），处理完之后提交到mutations进行状态更改。推荐使用module进行模块化管理，防止数据太多导致模块规范太乱的问题。

具体操作方式参考：Vuex ——详细介绍_不情不愿的博客-CSDN博客

以上就是比较常用的传值方式，有问题的可以私信咨询，看到就会回复~~