6.取函数名字的时候先取一个必须要改的名字，之后再改

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

7.index.html中,在g-tabs中监听update:selected事件，不会触发yyy,vue的事件是不会冒泡的,在哪里触发就在哪里，但是这个问题不是冒泡问题

  // 我们的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)
        }
    }

• 总结：事件要看在哪个对象上触发的，你需要知道你触发的事件是在哪个对象上触发的，一个是在this上面,一个是在this的eventBus上面,每个对象都可以触发不同事件。

8. 如果在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.关于Vue的事件要注意点

• 事件是在哪个对象上调用的,在哪个对象上调用就只能在那个对象上监听
• 事件不会冒泡,子标签触发的事件不会自动传到父标签

个人微信,欢迎交流!

本文由博客一文多发平台 OpenWrite 发布！