vue兄弟組件間的數據傳遞之使用vue實例bus傳遞數據

問題描述

vue項目中兄弟組件數據傳遞是比較經常使用的操做。比較經常使用的是vuex或事件總線vue實例來實現。本篇文章說一下vue實例bus的用法步驟。vue實例bus的用法就至關於一箇中間快遞小哥，會幫咱們在兄弟組件間進行數據傳遞。

步驟

第一步 寫好兩個兄弟組件並在父組件中引用

子組件一

<template>
  <div class="childOneBox">
    我是子組件一
  </div>
</template>

子組件二

<template>
  <div class="childTwoBox">
    我是子組件二
  </div>
</template>

父組件中引用

使用餓了麼的tab欄切換組件看着更加明顯一些

<template>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="卡片一" name="cardOne">
        <!-- 兄弟組件一 -->
        <child-one></child-one>
      </el-tab-pane>
      <el-tab-pane label="卡片二" name="cardTwo">
        <!-- 兄弟組件二 -->
        <child-two></child-two>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 引入子組件並註冊使用
import childOne from "./views/childOne";
import childTwo from "./views/childTwo";
export default {
  components: {
    childOne,
    childTwo,
  },
  data() {
    return {
      activeName: "cardOne",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

項目結構圖：

第二步 新建文件夾存放vue實例並在並在組件中引入使用

建立一個vue實例並暴露出去

在子組件中引入

注意A兄弟組件要傳數據到B兄弟組件，若使用vue實例，那麼兩個組件都須要引入bus實例

使用

補充

若是以爲新建一個文件夾用來存放bus文件有點麻煩，也能夠把實例的vue對象放在Vue的原型上面，放在原型上面的話，每一個.vue文件均可以訪問到。因此上述的寫法就會發生變化一下：

// 在main.js中把實例化的vue對象放在vue的原型上
Vue.prototype.$bus = new Vue()

// 子組件一
methods:{
    sendData(){
        this.$bus.$emit("send",this.childOneData)
    }
}

// 子組件二
created(){
    this.$bus.$on("send",(payload)=>{
        console.log("來自兄弟組件的數據",payload)
        this.msg = payload
    })
}