需求:二次封装element组件,需要支持原属性和插槽,这里分别说一下SFC和TSX的透传方式
透传属性 attrs
SFC: v-bind="$attrs" 和 useAttrs
// index.vue
<el-input v-bind="$attrs" />
// index.vue
<script setup lang="ts">
import { useAttrs } from "vue";
const attrs = useAttrs()
</script>
<template>
<el-input v-bind="attrs" />
</template>
TSX: {...attrs}
*setup(props,context)函数中上下文参数context,包含attrs、emit、slots
// index.tsx
import { defineComponent } from "vue";
export default defineComponent({
setup(props, {attrs}) {
return () => (
<el-input {....attrs}></el-input>
);
}
})
透传属性 slots
SFC: useSlots
// index.vue
<script setup lang="ts">
import { useSlots } from "vue";
const slots = useSlots()
</script>
<template>
<el-input v-bind="$attrs">
<!-- 遍历父组件传入的 solts 透传给子组件 -->
<template v-for="(item, key, i) in slots" :key="i" v-slot:[key]>
<slot :name="key"></slot>
</template>
</el-input>
</template>
TSX: v-solts={slots}
// index.tsx
import { defineComponent } from "vue";
export default defineComponent({
setup(props, {attrs、emit、slots}) {
return () => (
<el-input v-slots={slots}></el-input>
);
}
})
作者:柒号
链接:https://juejin.cn/post/7188054070152822845
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
我的透传方式
<template>
<AButton @click="clickHandle" v-bind="otherProps">
<template v-for="(item, key, i) in slots" :key="i" v-slot:[key]>
<slot :name="key"></slot>
</template>
</AButton>
</template>
<script setup lang="ts">
import type { ButtonProps } from 'ant-design-vue'
const props = withDefaults(defineProps<ButtonProps & {
/**
* 鼠标点击延迟时间,默认500
*/
delayTime?: number
}>(), {
delayTime: 500,
})
const otherProps = computed(() => Object.assign({}, props, { onClick: undefined }))
</script>