vue.js 兄弟组件间传值

1、兄弟之间传递数据可以借助事件车，通过事件的方式传递数据 2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。 3、传递数据方，通过一个事件触发Bus. e m i t ( 方 法 名 ， 传 递 的 数 据 ) 。 4 、 接 收 数 据 方 ， 通 过 m o u n t e d ( ) 触 发 B u s . emit(方法名，传递的数据)。 4、接收数据方，通过mounted(){}触发Bus. emit(方法名，传递的数据)。4、接收数据方，通过mounted()触发Bus.on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

示例如下(直接摘抄的实际案例)：

父组件：

<template>
  <el-tabs v-model="activeName" style="padding-left: 5px;">
    <el-tab-pane label="邮箱配置" name="first">
      <Config/>
    </el-tab-pane>
    <el-tab-pane label="发送邮件" name="second">
      <Send/>
   </el-tab-pane>
</template>

import Config from ./config
import Send from ./send

email.js，两个子组件都得导入的js，使得两个子组件共用一个事件机制，重点只是下面两句

import Vue from vue
export const Bus = new Vue

Config组件，传递数据的组件

import { get, update,Bus} from @/api/email

created() {
    this.init()
},
methods: {
    init() {
      get().then(res => {
        this.form = res
        Bus.$emit("transmitEmailConfig",this.form)
      })
    }
}

Send组件，也就是接受数据的组件

mounted() {
    this.transmitEmailConfig()
},
methods: {  
  transmitEmailConfig(){
      Bus.$on("transmitEmailConfig",(data) =>{
        this.eamilConfig = data
      })
    }
}