SlotEvents

一个vue3上给slot添加事件的容器组件，代码基于element-plus的only-child

安装

npm install vue3-slot-events
# or
yarn add vue3-slot-events

引入

// 全局引入
import {createApp} from 'vue'
import App from './App.vue'
import SlotEvents from 'vue3-slot-events'

const app = createApp(App)
app.use(SlotEvents)
app.mount('#app')


// 局部引入
import {SlotEvents} from 'vue3-slot-events'

使用

SlotTest.vue

<template>
  <div>这是插槽事件测试组件</div>
  <slot-events @click="handleClick">
    <slot name="referer"/>
  </slot-events>
</template>

<script setup>
const handleClick = () => {
  console.log('click')
}
</script>

<style scoped>

</style>

Main.vue

<template>
  <slot-test>
    <template #referer>
      点击试试看看
    </template>
  </slot-test>
</template>

<script setup>
import SlotTest from "./SlotTest.vue";
</script>

渲染结果（未增加额外元素渲染，纯文本和svg除外，这两类会包裹一个span标签）

 <div id="app" data-v-app="">
   <div>这是测试组件</div>
   <span> 点击试试看看 </span>
</div>

点击对应元素，控制台会打印 “click”

此容器组件，还支持组件自定义事件，完美解决slot无法绑定事件的问题