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;
});
}