使用 $attrs 进行透传,拿到所有传入的值,使用v-bind接收
使用 $slots 接收所有传入的插槽信息
<template>
<h2>Element-UI组件封装</h2>
<MyInput v-model="data" placeholder="搜索" maxlength="10" show-word-limit>
<template #prefix>
<el-icon class="el-input__icon">
<search />
</el-icon>
</template>
</MyInput>
</template>
<script setup>
import MyInput from '@/components/MyInput.vue'
import {Search } from '@element-plus/icons-vue'
</script>
<template>
<div>
<el-input v-bind="$attrs">
<template v-for="(value, name) in $slots" #[name]>
<slot :name="name"></slot>
</template>
</el-input>
</div>
</template>