Vue3如何无需来回传递Props为默认插槽添加Props/Attrs？

你可以在子组件内部直接操作插槽的VNode，自动将组件props绑定到插槽元素上，无需父组件手动传递作用域插槽参数。

实现方式 #

子组件（Component.vue） #

通过useSlots获取默认插槽内容，修改其VNode的props后重新渲染：

<template>
    <div>Component content</div>
    <render-slot />
</template>

<script lang="ts" setup>
import { useSlots, h } from 'vue'

const props = defineProps({
    required: {
        type: Boolean,
        default: false
    }
})

const renderSlot = () => {
    const defaultSlot = useSlots().default
    if (!defaultSlot) return null

    const slotVNodes = defaultSlot()
    if (slotVNodes.length === 0) return null

    // 给插槽根元素绑定目标属性（示例处理单个根元素，多根元素可遍历处理）
    const targetVNode = slotVNodes[0]
    targetVNode.props = {
        ...targetVNode.props,
        required: props.required
    }

    return h(targetVNode.type, targetVNode.props, targetVNode.children)
}
</script>

父组件（Parent.vue） #

直接使用组件即可，插槽内的元素会自动继承子组件的required属性：

<template>
    <Component required>
         <input /> <!-- 自动带上:required="true"属性 -->
    </Component>
</template>

注意事项 #

• 示例默认处理插槽仅有单个根元素的场景，若插槽内有多根元素，可遍历slotVNodes为每个元素绑定属性。
• 属性优先级：当前代码中子组件的required会覆盖插槽元素原本的同名属性；若希望插槽元素的属性优先级更高，调换...targetVNode.props和required: props.required的顺序即可。

内容的提问来源于stack exchange，提问作者Kim Boender