关于前端: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
    })
}