Vue造轮子-tab组件(中)
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 发布!