vue兄弟组件之间传参
vue兄弟组件之间传参(两种)第一种(vue 自带的功能)第二种(使用插件,适用vue3)第一种(vue 自带的功能)1、首先创建一个js(bus.js) 文件,导出vue 对象import Vue from 'vue'export default new Vue();2、在需要传递参数的兄弟组件里导入创建的 js 文件,并在传参的方法执行 Bus.$emit(‘方法名’, ‘需要传递的参数’)i
·
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;
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)