vue兄弟组件之间传值

Vue兄弟组件传值，可用的方法也比较多，习惯用eventBus，感觉比较方便高效，简单做个笔记

首先找个地方新建一个js文件，于晏放到了components文件夹下，命名eventBus,里面内容：

import Vue from 'vue'
export default new Vue()

在传值和需要被传值的两个组件中，分别引入该文件

import eventBus from '@/components/eventBus';

假设A组件中有一个类型为年份的时间选择器，年份更改之后希望B组件可以调用接口，重新查询该年份下的数据，即A组件向B组件传值，B组件拿到传过来的值调用接口，重新渲染页面

A组件内容：

<DatePicker 
    v-model="query.year"
    type="year" 
    @on-change="handleChangeYear"
    placeholder="请选择年份">
</DatePicker>



handleChangeYear(val){
    eventBus.$emit('send',val)
},

B组件内容：

在生命周期函数中接受传递过来的值，同时可以做想要的操作

mounted() {
   this.loadData();
   eventBus.$on('send',(year)=>{
     this.year = year;
     this.loadData();
   })
}