0

カスタム ドロップダウン コンポーネント '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>

私が受け取る出力は、ドロップダウン オプションの「-」(ハイフン) 文字のみです。データがスロットを通過していません。

どうすれば達成できますか？

4

1 に答える 1

1

スロットの小道具が継承されない理由は、スロットに何かをバインドして、子が拾うようにしなかったためです。これを行うには、コンポーネント自体のスロット プロパティであるv-bind="option"whereを追加するだけです。optionvue-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>
于 2020-01-15T19:21:43.357 に答える