如何在插槽中定义一个组件，该组件作为子组件中定义的道具

Question

假设我有三个组件：Alpha，Bravo和Charlie。

看起来像这样：

Alpha.vue

<template>
    <div class="alpha">
        <bravo>
            <template slot="card">
                <charlie></charlie>
            </template>
        </bravo>
    </div>
</template>

布拉沃·维尤

<template>
    <div class="bravo">
        <slot name="card" v-for="result in results" :result="result"></slot>
    </div>
</template>
<script>
export default {
    data: function() {
        return {
            results: [1, 2, 3]
        }
    }
}
</script>

查理·

<template>
    <h1>{{ result }}</h1>
</template>
<script>
export default {
    props: [
        'result'
    ]
}
</script>

如何在 Alpha 中的插槽中定义结果道具时将结果道具传递给查理？

这背后的想法是Bravo包含许多共享逻辑。Alpha 有不同的变体，可能包含不同的插槽卡(但始终具有结果道具(。

在运行该组件的那一刻，结果 prop 没有被解析为 Charlie 组件，并且发生了未定义的错误(该示例可能有几个错误的地方，但我希望它能演示我想要实现的目标。

Answer 1

我认为这是您情况的解决方案

Alpha.vue

<template>
<bravo>
<template slot="card" slot-scope="{ result }">
<charlie :result="result"></charlie>
</template>
</bravo>
</template>

你应该把你的插槽包装在Bravo.vue中

文档