问题形容
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 })}