前端

2023-03-30 03:06| 来源: 网络整理| 查看: 265

问题描述

vue项目中兄弟组件数据传递是比较常用的操作。比较常用的是vuex或事件总线vue实例来实现。本篇文章说一下vue实例bus的用法步骤。vue实例bus的用法就相当于一个中间快递小哥，会帮我们在兄弟组件间进行数据传递。

步骤第一步写好两个兄弟组件并在父组件中引用子组件一我是子组件一子组件二我是子组件二父组件中引用

使用饿了么的tab栏切换组件看着更加明显一些

// 引入子组件并注册使用 import childOne from "./views/childOne"; import childTwo from "./views/childTwo"; export default { components: { childOne, childTwo, }, data() { return { activeName: "cardOne", }; }, methods: { handleClick(tab, event) { // console.log(tab, event); }, }, };

项目结构图：

第二步新建文件夹存放vue实例并在并在组件中引入使用创建一个vue实例并暴露出去

在子组件中引入

注意A兄弟组件要传数据到B兄弟组件，若使用vue实例，那么两个组件都需要引入bus实例

使用

补充

如果觉得新建一个文件夹用来存放bus文件有点麻烦，也可以把实例的vue对象放在Vue的原型上面，放在原型上面的话，每个.vue文件都可以访问到。所以上述的写法就会发生变化一下：

// 在main.js中把实例化的vue对象放在vue的原型上 Vue.prototype.$bus = new Vue() // 子组件一 methods:{ sendData(){ this.$bus.$emit("send",this.childOneData) } } // 子组件二 created(){ this.$bus.$on("send",(payload)=>{ console.log("来自兄弟组件的数据",payload) this.msg = payload }) }

【本文地址】

公司简介

联系我们