1 认识插槽Slot
2 使用插槽slot
替换插槽的元素必须是双标签
3 简单使用
使用子组件时,自动替换对应位置的插槽,插槽元素的内容就是没有被替换时的默认内容
多个插槽的使用
4 非父子组件的通信
通过事件总线通信
导入库
npm install -g hy-event-store
1 创建库的事件总线类对象,event-bus.js
import { HYEventBus } from 'hy-event-store'
const eventBus = new HYEventBus()
export default eventBus
2 使用事件总线工具
发送emit,接受on
1 子组件发送事件
<template>
<div class="banner">
<button @click="bannerBtnClick">banner按钮</button>
</div>
</template>
<script>
import eventBus from './utils/event-bus'
export default {
methods: {
bannerBtnClick() {
console.log("bannerBtnClick")
eventBus.emit("whyEvent", "why", 18, 1.88)
}
}
}
</script>
<style scoped>
</style>
2 其他组件接收事件
<script>
import eventBus from './utils/event-bus'
export default {
created() {
// fetch()
// 事件监听
eventBus.on("whyEvent", (name, age, height) => {
console.log("whyEvent事件在app中监听", name, age, height)
this.message = `name:${name}, age:${age}, height:${height}`
})
}
}
</script>
3 事件移除
组件被销毁时,移除监听
<script>
import eventBus from './utils/event-bus'
export default {
methods: {
whyEventHandler() {
console.log("whyEvent在category中监听")
}
},
created() {
eventBus.on("whyEvent", this.whyEventHandler)
},
unmounted() {
console.log("category unmounted")
eventBus.off("whyEvent", this.whyEventHandler)
}
}
</script>