# vue3-slot-event

**Repository Path**: thesadboy/vue3-slot-event

## Basic Information

- **Project Name**: vue3-slot-event
- **Description**: Vue3中给slot添加事件的容器库（代码截取于ElementPlus的only-child）
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-17
- **Last Updated**: 2024-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SlotEvents

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

## 安装

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

## 引入

```typescript
// 全局引入
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

```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

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

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

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

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

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

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