vue 组件间通讯

总结起来三种方式

一、eventbus

bus.js

import Vue from 'vue'
export default new Vue()//生成一个vue的实例

component1.vue

import Bus from './bus.js'
<script>
export default{
      methods:{
          busToComponent2(){
            let data={a:1,b:2}
            Bus.$emit('callCompoent2',data)
          }
      }
}
</script>

component2.vue

import Bus from './bus.js'
<script>
export default{
      created(){
          Bus.$on('callCompoent2',this.dataCallback) 
      },
      methods:{
            dataCallback(){
              //...dosomething
            }
      }
}
</script>

二、vuex

store.js

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

app.js

import store from './store.js'
new Vue({
    store:store//全局注入，这样才能在所有组件中使用$store
})

com1.vue

import {mapState} from 'vuex'
<template>
   <div>
       <div @click="">通过方法调用<div>
       <div @click="$store.commit('increment')">直接调用<div>
       <div @click="add">通过方法调用<div>
  <div>
</template>
<script>
export default{
    methods:{
          add(){
            this.$store.commit('increment')//方法里面需要加this
             //错误的使用方式 this.$store.state.count++
          }
    }
}
</script>

com2.vue

<template>
     <div>
         {{count1}}<br/>
         {{count2}}
    <div>
</template>
<script>
export default{
    data(){
        return {
            count1:this.$store.state.count  
        }
    
    },
    computed:{
      ...mapState({
            count2:state=>state.count//这里取了个别名count2
      //data里面的count1只会在初始化的时候获取一次，
      //这里的count2是根据store.js里面的count变化而变化的，
      //这是计算属性的强大之处
      })
    }
}
</script>

在组建1中点击按钮 你会发现组件2中的数据count2发生了变化

三、通过层级与组件的name去查找

组件1的name 是table 。子组件name是td 。可以使用this.$parent递归查找最近的name为table父组件,类似于原生的dom对象查找。就算中间有一层tr也没有关系，找到这个组件就可以用$emit()进行通讯了。