组件间的通信方法总结

常规方法
1.props和$emit
①父组件向子组件传值
父组件：
v-on:message=“msg”，对msg进行数据的处理。
子组件：
props:[‘message’]接收 父组件里msg的值
②子组件向父组件传值
子组件：
触发方法里面：this. $emit(‘父组件接收的方法名’，值val)
父组件：
v-on:方法名=“父组件接收的方法名”，对方法名处理

缺点：父组件不能给子组件的子组件传值，只能父子传。

2.$ attrs和$ listeners
组件顺序：A-B-C

在B组件里写：
< C v-bind=“$ attrs” v-on=“$ listeners”></ C>
C给A传值：v-on=“$ listeners”
在C组件里：
调用值都加$attrs. 触发的函数里写this. $emit(‘爷组件接收的方法名’,val)
A组件里：
v-on:方法名=“父组件接收的方法名”，对方法名处理
A给C传值：v-bind=" $attrs"
A组件里：
v-on:message=“msg”，对msg进行数据的处理。
C组件里：props:[‘message’]接收 父组件里msg的值

缺点：只能隔一代传，且B接收了A的值，则C就不能再接收了。

3.中央事件总线

新建一个js文件，取名eventBus.js
里面是：
import Vue from 'vue';  
export default new Vue();

在组件中引入这个文件
然后执行代码为：bus.$emit('触发名称', 传输的数据 )
需要的通信的另一个组件中 mounted生命周期钩子中执行如下：
 bus.$on('触发名称', res => {
 //写你需要的方法
})

优点：适用各种组件，父子，孙子，兄弟关系的都可以。

4.provide和inject
父组件传给父组件下的子组件（可以孙辈）
子组件：
inject:[‘for’]//得到父组件传过来的值
父组件：
provide:{for:‘val’}//父组件要传过来的值

缺点：只能从父组件给子组件传值
优点：可以传给很深的子组件，适用于组件嵌套很深的情况。

5.v-model
父传子：
父组件：
在子组件里写v-model=“message”
子组件：
props:{
value:类型,
},
在data里调用这个value
子传父：
子组件：
函数绑定里写this.$emit(‘输入框，如input’,this.mymessage);
父组件：
v-model=“mymessage”

优点：使用时更加简洁
缺点：代码阅读难懂

6.$ parent和$ children
子传父
子组件：
绑定函数，写this.$parent.message = this.mymessage;
父传子：
父组件：
绑定函数，this. $children[0].mymessage = ‘hello’;
子组件：props:{value:类型, },在data里调用这个value

缺点：容易出错，比如这个children的数组顺序，假如被修改引入组件顺序就容易报错。

7.通用方法，缺点就是复杂：
重点：使用vuex
store文件下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//存放项目中需要多组件共享的状态
    tableDate:{},//存放表格信息
  },
  getters:{//获取值（用的比较少）
      gettableData(state){
          return state.tableDate
      }
  },
  mutations: {//存放更改state里状态的方法，更改值
    settableData(state,tableMsg){
        state.tableDate=tableMsg;
    }
  },
  actions: {//放axios请求
      settableMsg({commit,state},tableMsg){
        var params=tableMsg;
        this._vm.$axios.post("/api/order/query", params).then(res => {
            if (res && res.status == 200) {
                commit('settableData',res.data.data)//把数据传给更改函数
            }
          })
      }
  },
  modules: {//把状态和管理规则分类来装
  }
})

传值组件

this.$store.dispatch('settableMsg',传递参数);

获得数据组件

computed:{
      tableData:function(){
          return this.$store.getters.gettableData;
      }
  },