<p style="text-align: center">

@H_5022@@H502_2@

如图所示，要完成类似的一个底部导航切换。@H_502_2@

首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。@H_502_2@

@H_502_2@@H_502_2@

我将5个主要的vue文件放在了5个不同的文件夹@H_502_2@

然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件@H_502_2@

Item.vue文件如下@H_502_2@

Tabbar.vue文件和Item.vue的关系为父子关系.@H_502_2@

Tabbar.vue组件 通过v-for循环tabbarDes里面的数据.再通过 props 向下传递数据给子组件.Item.vue能接受到父组件传递的数据.@H_502_2@

Item.vue组件绑定点击事件.@H_502_2@

this.$router.push('/'+this.page);为跳转到对应的page@H_502_2@

this.$emit('change',this.page)为使用$emit 触发父组件的自定义事件 change,将this.page作为参数传递到父组件中.父组件点击获取到传递过来的参数.再通过props传递给item.vue.在computed计算属性中.返回不同的布尔值.来做底部图片的显示隐藏.@H_502_2@

最后仅需要在App.vue中引入Tabbar组件即可.@H_502_2@

• 上一篇：解决vue单页路由跳转后scrollTop的下一篇：Vue 通过自定义指令回顾v-内置指令