Vue 怎么通过 props 将插槽传递给子组件？
父组件
<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' 的情况
回答：
可以使用插槽
<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>
回答：
子组件改成这样:
<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>
以上是 Vue 怎么通过 props 将插槽传递给子组件？ 的全部内容， 来源链接： utcz.com/p/932909.html
