總結(jié)起來三種方式

一、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="">通過方法調(diào)用<div>
       <div @click="$store.commit('increment')">直接調(diào)用<div>
       <div @click="add">通過方法調(diào)用<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是根據(jù)store.js里面的count變化而變化的，
      //這是計算屬性的強大之處
      })
    }
}
</script>

在組建1中點擊按鈕 你會發(fā)現(xiàn)組件2中的數(shù)據(jù)count2發(fā)生了變化

三、通過層級與組件的name去查找

組件1的name 是table 。子組件name是td ?？梢允褂胻his.$parent遞歸查找最近的name為table父組件,類似于原生的dom對象查找。就算中間有一層tr也沒有關(guān)系，找到這個組件就可以用$emit()進行通訊了。