-Tab create the wheel assembly (in)

1. If a tag to a class, the label itself another class, vue default will merge. Only two properties is one class, one style. This is better to change the style.

    <g-tabs-head class="red"></g-tabs>

Structure and the transfer process of the selected assembly 2, shown below.

• No click the map
  
• Figure occurred click operation, there is no relationship between the two brothers item, do the following figure of five things that happened after the click.
  1. Liang himself
  2. Brothers put out
  3. Liang pane
  4. Put out the pane
  5. Trigger events update: selected -> item2
     

3. Next consider implementing the code, there are two options

1. Before the first father son grandfather communicate with each other

2. By Event Center EventHub or call EventBus publish subscribe model to achieve this simple
   

   Properties 4. Do not use the underscore at the beginning of private property is used to vue, the beginning of the special properties of $ can be used

   5. grandfather tabs components above plus privide offspring can be used, other property only to son to grandson does not provide that only provide any offspring can access.

    // tabs.vue这样就有了eventBus   
   data(){
      return {
        eventBus: new Vue()
      }
    },
    provide(){
      return {
        eventBus:this.eventBus
      }
    },
    created(){
      console.log('爷爷的eventBus')
      console.log(this.eventBus)
      // this.$emit('update:selected','xxx')
    }

    // tabs-head.vie儿子就有了eventBus,其他组件同理
    inject: ['eventBus'],
    created(){
      console.log('爷爷给爸爸的eventBus')
      console.log(this.eventBus)
    }

The following diagram where the word is to provide an orange

6. Take time to take the name of the function must change a name, and then changed after

    created(){
      this.eventBus.$on('update:selected',(name)=>{
        console.log(name)
      })
      // 这句话的意思是监听selected被更新了，并且执行一个回调,这里监听的可能是其它的组件
    },
    methods: {
      xxx(){
        this.eventBus.$emit('update:selected',this.name)
        // 这句话的意思是大声喊出来selected更新了
      }
    }

7.index.html, the g-tabs in listening update: selected events will not trigger yyy, vue event is not bubbling, where the trigger on where, but this problem is not bubbling problem

  // 我们的eventBus是g-tabs生成的new Vue(),而app.js监听的g-tabs,是一个vue组件，
  // 也就是vue组件的事件，而不是new Vue()
  <g-tabs :selected.sync="selectedTab" @update:selected="yyy"></g-tabs>
    methods: {
        yyy(data){
            console.log('yyy')
            console.log(data)
        }
    }

    // 那么组件怎么触发呢
    // tabs.vue
    created(){
        this.$emit('update:selected', '这是 this $emit 出来的数据') // 这样写可以触发外面,这里的this
        就是当前组件
        this.eventBus.$emit('update:selected', '这是 this event $emit 出来的数据') // 这样写不可以触发外面
    }
    // app.js
    <g-tabs :selected.sync="selectedTab" @update:selected="yyy"></g-tabs>
    methods: {
        yyy(data){
            console.log('yyy')
            console.log(data)
        }
    }

• Summary: In the event depends on which object is triggered, you need to know your event is triggered on which the object is triggered, this is a top, this one is in the eventBus above, each object can trigger different events.

8. If not trigger on the tabs-header

    // tabs-head
    created(){
      this.$emit('update:selected', '这是 tabs-head 抛出来的数据') 
      // 这样写不可以触发外面是因为vue的事件系统是不会冒泡的,
      //如果g-tabs-head标签是一个div那么是可以触发到g-tabs的因为div是可以冒泡的
    }
    // index.html
     <g-tabs :selected.sync="selectedTab" @update:selected="yyy">
        <g-tabs-head class="red">
            <template slot="actions">
                <button>设置</button>
            </template>
        </g-tabs-head>
    </g-tabs>

9. events to pay attention to the point about Vue

• Event on which the object is invoked, the object on which the listener can only call on that object
• Event does not bubble, sub-tag event trigger will not be transferred automatically to the parent tag

Personal micro letter, please share!