带有道具的 vuejs 嵌套插槽不会放下

问题描述

我想将道具“multi”从 vDropdownSelection 下推到“vOptions”。如果不在每个选项上添加“：multi”，我该怎么做？我试过 slotprops 但它不起作用...

这是我的设置。

<!-- root -->
  <vDropdownSelection :multi="true">
    <vOption id="dd5" label="Choose me" />
    <vOption id="dd6" label="No take me" />
    <vOption id="dd7" label="I don't care..."/>
  </vDropdownSelection>

multi 变为 true

//vDropdownSelection
<template>
  <vPopOver>
    <template #trigger="{ click }"> 
      <button @click.prevent="click">{{ label }}</button>
    </template >
    <template #default>
      <vSelectGroup :multi="multi" #default="{multi}">
        {{ multi }} // shows true
        <slot :multi="multi"/> // cannot pass multi ´
      </vSelectGroup>
    </template>
  </vPopOver>
</template>
<script>
export default {
  props: {
    multi: {
      type: Boolean,default: false
    }
  }
}
</script>

multi 变为 true

//vSelectGroup
<template>
  <div>
     <slot :multi="multi"/>
  </div>
</template>
<script>
export default {
  props: {
    multi: {
      type: Boolean,default: false
    }
  }
}
</script>

multi 仍然是假的...

// options
<template>
  <div>
    <input :type="isType">
    <label>{{ label }}</label>
  </div>
</template>
<script>
export default {
  props: {
    multi: {
      type: Boolean,default: false
    }
  },computed: {
    isType() {
      return this.multi ? 'checkBox' : 'radio'
    }
  }
}
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）