Vue简单实现-点击顶部导航栏动态改变左侧导航显示内容

本文介绍了如何在Vue中通过兄弟组件传值和v-if指令,实现点击顶部导航栏时动态更新左侧导航的内容,不改变页面地址。主要步骤包括新建Vue组件、创建总线以及在各个组件中应用。
摘要由CSDN通过智能技术生成

说明:

1.不清楚这样写会不会影响性能,只是觉得这样比较简单

2.通过 兄弟组件传值 + v-if 实现

3.不改变页面地址

做出来的效果如下:

1.新建三个vue组件,其中Home是父组件,Header和BodyLeft是兄弟组件

2.在main.js中创建总线

let bus = new Vue()
Vue.prototype.bus = bus

3.编写Header.vue和BodyLeft.vue的代码,使用bus进行兄弟组件间的传值


                
评论 22
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值