Subscribe on changes!

Combine component and slot to realize transparent transmission of class, style and attrs to a certain slot

avatar
Aug 25th 2022

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.