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
    })
}