Vue 怎么通过 props 将插槽传递给子组件？

Question

父组件

<template>
    <child-component :data='data'>
        <div>custom</div>
    </child-component>
</template>
<script>
const data = [
    {
        type: 'input',
    },
    {
        type: 'select'
    },
    {
        type: 'custom'
    }
]
</script>

子组件

<template>
    <template v-for='item in data'>
        <input v-if="item.type === 'input'" />
        <select v-if="item.type === 'select'" />
        如果 type == 'custom' 使用父组件的 `<div>custom</div>`
    </template>
</template>

请问怎么实现 type == 'custom' 的情况

Answer 1

可以使用插槽

<template>
    <template v-for='item in data'>
        <input v-if="item.type === 'input'" />
        <select v-if="item.type === 'select'" />
        如果 type == 'custom' 使用父组件的 `<div>custom</div>`
        <slot v-if="item.type === 'custom'"></slot>
    </template>
</template>

Answer 2

子组件改成这样:

<template>
    <template v-for='item in data'>
        <input v-if="item.type === 'input'" />
        <select v-if="item.type === 'select'" />
        <div v-if="item.type === 'custom">
            <slot></slot>
        </div>
    </template>
</template>