Javascript Vue.js/Nuxt.js-如何将道具传递到插槽？

因此，我有一个祖父母组件，其代码如下：

<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>

选择1
选择2
从“~/components/render/Question”导入问题；
从“~/components/render/Answer”导入答案；
导出默认值{
组成部分：{
问题
答复
}
};

父组件：

<template>
  <div>
        <slot v-bind="$props"></slot>
  </div>
</template>
<style>
</style>
<script>
export default {
  props: ['qtype','qroot']
};
</script>

导出默认值{
道具：['qtype'，'qroot']
};

儿童：

<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>

{{$props}


导出默认值{
道具：[“qtype”、“qpoints”、“qcorrect”、“qroot”、“aid”]
};

我尝试使用v-bind，像这样的常规道具传递：qtype=“qtype”’，但它似乎不起作用。

---

如何将“qtype”和“qroot”道具传递给孙子组件？

您可以通过使用来实现自己的愿望

首先，我们需要在

Question.vue

中正确命名prop绑定。现在让我们称之为

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>

出去