事件总线及插槽

事件总线

• 这里采用的原理事件：触发机制和监听机制
• vue3和vue2实现不一样，vue3推荐使用第三方库，需要安装库：mitt -> yarn add mitt/cnpm install --save mitt/npm i -S mitt
• 凡是牵扯到事件的业务一定要注意：
  • 发送方和接收方都必须同时存在
  • 监听必须早于发送，先监听 后触发
• provide和inject传递普通属性
• 配合computed函数实现动态数据传递

总结

• 事件总线
  • 借助第三方库 mitt-> yarn add mitt
  • 使用配置对象config配置全局属性globalProperties定义全局属性$bus,值为一个Emitter实例对象
  • 然后在组件中一定要注意
    • 1.事件触发方和事件监听方都必须同时存在
    • 2.监听方必须早于触发方执行
  • 使用 $ bus.emit(eventName,…args)发送；使用$bus.on(eventName,eventHandleFunction)接收事件
• 注入
  • 注意点
    • 1.inject注入数据必须是在provide提供数据的组件范围（scope—作用域）内
    • 2.如果要使用this实例上的值，provide必须是函数，然后在函数内返回提供数据对象
    • 3.如果传递的数据可以进行改变并实时更新compute函数（函数内需要传递一个工厂方法）
• 插槽
  • 定义：用于组件自定义内容部分的占位符，提高组件的自定义能力（扩展能力）
  • 类型：
    • 默认插槽，通过name属性给slot组件定义名字的插槽----具名插槽
  • v-slot 指令
    • 使用绑定语法（指令参数语法）指定插槽的名字
    • 通过值来接收绑定在slot组件上的数据，接收到是一个对象（key是属性，value是属性绑定的值）
    • 注意点：
      • 这个指令只能使用template组件

插槽是什么?

• 插槽就是一个占位符，用于组件扩展和自定义使用的一个占位符

具名插槽

• 通过name属性给slot起一个名字的插槽
• 如果需要指定放置插槽位置，设置插槽名字—v-slot
• v-slot只能使用于自定义指令上
• 绑定在slot组件上的属性会变成一个key，值为这个key的值
  

默认插槽

• 没有通过v-slot指定名字就是默认插槽