vue兄弟组件之间传参

第一种（vue 自带的功能）

1、首先创建一个js(bus.js) 文件，导出vue 对象

import Vue from 'vue'

export default new Vue();

2、在需要传递参数的兄弟组件里导入创建的 js 文件,并在传参的方法执行 Bus.$emit(‘方法名’, ‘需要传递的参数’)

import Bus from "@/bus";

getInfo(info){
   // 向弹窗组件传递当前选中信息  'getListInfo'  接受的方法名   info 传递的值
   Bus.$emit('getListInfo', info)
}

3、在另一个组件里接收，先导入创建的 js 文件，调用 Bus.$on(‘方法名’, (data) => {})方法接受传来的值。

import Bus from "@/Bus";

created() {
   // 获取兄弟组件传来的值
   Bus.$on("getListInfo", (data) => {
     console.log(data);
   }
}

第二种（使用插件，适用vue3）

1、先安装 npm install mitt 插件
代码片.

npm install mitt

2、创建一个js 文件，导入 mitt

import mitt from 'mitt'

const bus = {}

const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

3、在发送组件里使用

import bus from "@/bus";

transmit(){
	bus.$emit("closeShow2", false);
}

4、在接受值的组件里使用

import bus from "@/bus";

created() {
  bus.$on("closeShow2", (val) => {
    this.isShow2 = val;
  });
}