【5 Vue组件化 - 插槽Slot/非父子通信】

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>