0.0.7 • Published 1 year ago
vue3-slot-events v0.0.7
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无法绑定事件的问题