Vue .js / Nuxt. js - Как передать реквизит в слоты?

Question

Итак, у меня есть один родительский компонент, который имеет этот код:

<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" и "q root" компоненту внука?

Answer 1

Вы можете достичь того, что вы хотите, используя Scoped Slots .

Прежде всего нам нужно правильно назвать привязку реквизита в Question.vue. Давайте сейчас назовем это slotProps.

<!-- Question.vue -->
<slot :slotProps="$props"></slot>

Теперь давайте сделаем все маги c в основном файле.
Теперь вспомните, как я упомянул слоты Scoped? Используя их 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 или выше!

Не уверен, что это работает? Проверьте это из.