所以我有一个具有以下代码的祖父组件：
<template>
<div>
<Question qtype="single" qroot="1">
<Answer qpoints="5" aid="1" qcorrect>Option 1</Answer>
<Answer qpoints="0" aid="2">Option 2</Answer>
</Question>
</div>
</template>
<style>
</style>
<script>
import Question from "~/components/render/Question";
import Answer from "~/components/render/Answer";
export default {
components: {
Question,
Answer
}
};
</script>
父组件：
<template>
<div>
<slot v-bind="$props"></slot>
</div>
</template>
<style>
</style>
<script>
export default {
props: ['qtype','qroot']
};
</script>
孩子：
<template>
<div>
{{$props}}
<li style="clear: left;">
<input v-if="qtype == 'single'" :id="'qid-'+qid" type="radio" :name="qroot" :value="qid" style="float:left" />
<input v-if="qtype == 'multiple'" :id="'qid-'+qid" type="checkbox" :name="qroot" :value="qid" style="float:left" />
<label style="float:left;margin-left:5px" :for="'qid-'+qid">
<slot></slot>
</label>
</li>
</div>
</template>
<style>
</style>
<script>
export default {
props: ["qtype", "qpoints", "qcorrect", "qroot", "aid"]
};
</script>
我尝试使用 v-bind，像这样的常规道具传递 '：qtype="qtype"' 但它似乎不起作用。 如何将"qtype"和"qroot"道具传递给孙子组件？
您可以使用作用域槽实现您想要的目标。
首先，我们需要正确命名Question.vue中的道具绑定。让我们暂时称之为slotProps。
<!-- Question.vue -->
<slot :slotProps="$props"></slot>
现在让我们在主文件中执行所有魔术.
现在还记得我是如何提到作用域插槽的吗？使用他们的 API，我们可以做到这一点。我认为代码不言自明。
<!-- main file -->
<Question qtype="single" qroot="1" v-slot="{ slotProps }">
<Answer :qtype="slotProps.qtype" :qroot="slotProps.qroot" qpoints="5" aid="1" qcorrect>Option 1</Answer>
<Answer :qtype="slotProps.qtype" :qroot="slotProps.qoot" qpoints="0" aid="2">Option 2</Answer>
</Question>
免责声明：这仅适用于Vue 2.6或更高！
不相信它有效？看看这个。