vue-select ：从 VueJs 中的祖父组件传递选项槽答案

【问题标题】：vue-select : Passing option slot from grandparent component in VueJsvue-select ：从 VueJs 中的祖父组件传递选项槽
【发布时间】：2020-05-02 13:03:33
【问题描述】：

我正在使用自定义下拉组件'vue-select'，它有一个插槽选项，我们可以通过它自定义选项视图，如本文档所示 -> https://vue-select.org/guide/slots.html

类似的事情我想通过从祖父组件传递一个插槽来实现它。这是我尝试过的。

App.vue（祖父组件）

<template>
  <div id="app">
    <v-select-wrapper v-model="selectedData" :options-data="[{
        id:1,
        label: 'New York'
      }, {
        id:2,
        label : 'London'
      }]">
      <template v-slot:option-data="option">
        {{option.id}} -
        {{ option.label }}
      </template>
    </v-select-wrapper>
  </div>
</template>

VSelectWrapper.vue(父组件)

<template>
  <v-select :options="optionsData" :value="value" @input="inputChanged">

    <template v-slot:option="option">
      <slot name="option-data"/>
    </template>
  </v-select>
</template>

<script>
  import vSelect from "vue-select";

  export default {
    name: "VSelectWrapper",
    components: {
      vSelect
    },
    props: {
      optionsData: {type: Array},
      value: {}
    },
    methods: {
      inputChanged(val) {
        this.$emit("input", val);
      }
    }
  };
</script>

我收到的输出只是下拉选项中的“-”（连字符）字符。数据没有通过插槽。

如何实现？

【问题讨论】：

可能不是解决方案，但是你需要指定一个构造函数（对于这个value prop）而不是一个空对象。
@YomS。同意，但value 似乎一开始并没有作为道具传下来。在@aniket_777 的祖父组件中。
@Paul Bovis，我保留 value 作为道具的原因是为我的 Vue 包装器制作 v-model

标签： javascript vue.js vuejs2 vue-select

【解决方案1】：

您的插槽道具没有传递下去的原因是因为您没有在插槽上绑定任何东西以供孩子们拾取。为此，您只需添加v-bind="option"，其中option 是vue-select 组件本身的插槽属性：

`VSelectWrapper.vue`

<v-select
  :options="optionsData"
  :value="value"
  @input="inputChanged">
  <template v-slot:option="option">
    <slot name="option-data" v-bind="option"></slot>
  </template>
</v-select>

【讨论】：

完美！非常感谢:)