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