造轮子-tab栏切换以及$event和eventBus深入理解

1. 项目初始：

新建tabs.vue/tabs-body.vue/tabs-head.vue/tabs-item.vue/tabs-pane.vue

样式结构
tabs.vue

app.js

new Vue({
  el: '#app',
  data: {
    selectedTab: 'sports'
  }
})

index.html

   
    
   
        
            
                美女
            
            
                财经
            
            
                体育
            
        
        
            
                美女相关资讯
            
            
                财经相关资讯
            
            
                体育相关资讯
            
        
    

相关补充：

$event是指对应的事件信息。
对于原生元素（如 button、input）来说，$event 是原始的 DOM 事件。
对于自定义组件（如 child）来说，$event 是其自身$emit里的第二个参数。

上面的$event就是$emit的第二个参数，也就相当于$emit('update:selceted', 'xxx')，也就是update:selected事件触发时你写的第二个参数就比如我这里的'xxx'，那么你的$event就是'xxx'，其实就是子组件给父组件传递的那个数据就相当于
index.html

{{selectedTab}}//这里的值就是$event也就是你下面触发update:selected事件传入的数据'xxx'

子组件tabs.vue

实现tab切换

通过事件中心发布订阅给所有的组件，谁变了就发布一个事件，其他的组件跟着订阅就好
在tabs.vue组件中声明一个事件中心

import Vue from 'vue'
    export default {
        name: 'GuluTabs',
        data(){
            return {
                eventBus: new Vue()
            }
        },
        provide(){
            return {
                eventBus: this.eventBus
            }
        },
        created(){
            console.log(this.eventBus)
            //this.$emit('update:selected', $event.tagrget)
        
        }
    }

在data里声明这个eventBus，然后通过provide（https://cn.vuejs.org/v2/api/#provide-inject）方法将当前的eventBus传给eventBus好让其他的组件都可以使用，然后哦当前组件只需要通过this.eventBus就可以使用，这里通过proviede方法提供的属性，在其他任何子孙组件中可以直接通过inject['eventBus']注入，然后只要在其他组件中使用this.eventBus就可以拿到这个事件中心了，然后只需要在每个组件的事件中心里触发你的update:selcected事件，将它们的name就可以拿到它们对应的name了
在tabs-item和tabs-pane组件中分别监听事件中心的update:selected事件，当点击tabs-item的时候触发这个事件，并把当前name传给组件
tabs-item.vue

tabs-pane.vue

然后点击tabs-item就会打印出6个对应的name，上面三个item和下面三个pane的

• 问题1：我通过事件中心触发了update:selected事件，那会不会触发下面的yyy？
  index.html

答：不会。因为你的事件中心eventBus是在tabs.vue里的data里声明的一个new Vue()，而你上面的代码是监听的，也就是组件tabs，当tabs触发update:selected事件时，他才会执行yyy，要想触发tabs组件的update:selected事件，就要直接在tabs.vue里写

created(){
  this.$emit('update:selected', '这是this $emit出来的数据')
}

然后yyy就会执行，就会打印出这是this $emit出来的数据

• 问题2：我如果在里触发update:selected事件，那么里的yyy会被触发吗？
  index.html

tabs-head

created(){
  this.$emit('update:selected','这是tabs-head抛出的数据')
}

答：不会。原因vue的事件是不会冒泡的，你在哪个组件上触发事件，就要对应的在哪个组件对应的标签上监听事件。

切换功能实现

在tabs.vue里触发事件中心将当前的selected传给组件

然后在item和pane里监听事件中心，拿到事件触发时传入的selceted，如果当前的name等于传进来的selecetd就让active为true
tabs-item.vue

tabs-pane.vue