Vue 插槽事件

在Vue中，插槽（Slot）是一种可以替换组件模板中的DOM结构的功能。而插槽事件则是一种可以在插槽内触发事件的功能。

基本用法

在组件的模板中定义一个插槽：

<template>
  <div>
    <slot name="content"></slot>
  </div>
</template>

在插槽内部增加一个按钮，触发click事件：

<template>
  <div>
    <slot name="content"></slot>
    <button @click="$emit('my-click')">click me</button>
  </div>
</template>

使用组件时，利用v-slot指令指定插槽的名字，然后定义一个事件处理函数：

<template>
  <my-component>
    <template v-slot:content>
      <div>插槽内容</div>
      <button @click="handleClick">触发插槽事件</button>
    </template>
  </my-component>
</template>

在组件中定义事件处理函数：

export default {
  methods: {
    handleClick() {
      console.log('插槽事件触发了！')
    }
  }
}

带参数的插槽事件

如果希望在触发插槽事件时传递参数，可以在$emit方法中传递一个对象：

<template>
  <div>
    <button @click="handleClick('Hello!')">click me</button>
  </div>
</template>

定义事件处理函数并接收参数：

export default {
  methods: {
    handleClick(msg) {
      console.log(msg)
    }
  }
}

匿名插槽事件

如果不需要指定插槽名称，可以使用默认插槽，就像这样：

<template>
  <div>
    <slot></slot>
  </div>
</template>

在使用组件时，不需要指定插槽名称：

<template>
  <my-component>
    <div>插槽内容</div>
    <button @click="handleClick">触发插槽事件并传递参数</button>
  </my-component>
</template>

组件上的v-on指令

如果不想在插槽内部定义事件处理函数，也可以使用组件上的v-on指令直接绑定事件：

<template>
  <my-component @my-click="handleClick">
    <div>插槽内容</div>
  </my-component>
</template>

这样，在组件内部触发插槽事件时，会自动调用组件上绑定的事件处理函数。

总结

Vue的插槽事件功能十分强大，可以很方便地实现逻辑的复用和自定义事件的触发。在组件化的开发中，使用插槽事件可以使代码更加清晰、易于维护。