Combine component and slot to realize transparent transmission of class, style and attrs to a certain slot
What problem does this feature solve?
Combine component and slot to realize transparent transmission of class, style and attrs to a certain slot
What does the proposed API look like?
/* Define */
/* grid-view.vue */
<script setup>
defineProps({
col: {
type: Number,
default: 2,
},
});
</script>
<template>
<component
:is="$slots.default"
:style="`grid-template-columns: repeat(${col}, 1fr);`"
aaa="bbb"
class="grid-view">
</component>
</template>
/* Usage */
/* page.vue */
<template>
<grid-view>
<el-form></el-form>
</grid-view>
</template>
In essence, slot can be regarded as a function component. It is hoped that class, style and attrs can be transparently transmitted to the el-form component in this way to change the style of the el-form component.