<p style="text-align: center">
如图所示，要完成类似的一个底部导航切换。
首先。我们需要分为5个大的VUE文件。可以根据自己的习惯来放在不同的位置。
然后,在components文件夹里新建Tabbar.vue/以及Item.vue文件
Item.vue文件如下
Tabbar.vue文件和Item.vue的关系为父子关系.
Tabbar.vue组件 通过v-for循环tabbarDes里面的数据.再通过 props 向下传递数据给子组件.Item.vue能接受到父组件传递的数据.
Item.vue组件绑定点击事件.
this.$router.push('/'+this.page);为跳转到对应的page
this.$emit('change',this.page)为使用$emit 触发父组件的自定义事件 change,将this.page作为参数传递到父组件中.父组件点击获取到传递过来的参数.再通过props传递给item.vue.在computed计算属性中.返回不同的布尔值.来做底部图片的显示隐藏.
最后仅需要在App.vue中引入Tabbar组件即可.
