web-dev-qa-db-ja.com

vue-ラッパーコンポーネント内のスロットを渡す方法

そこで、次のようなテンプレートを使用して簡単なラッパーコンポーネントを作成しました。

<wrapper>
   <b-table v-bind="$attrs" v-on="$listeners"></b-table>
</wrapper>

$attrsと$listenersを使用して、小道具とイベントを伝えます。
正常に動作しますが、ラッパーはどのようにして<b-table>名前付きスロットを子にプロキシできますか？

vue.jscomponentsvue-componentwrapper
31
user3599803

Vue 2.6（v-slot構文）

通常のスロットはすべてスコープスロットに追加されるため、これを行うだけで済みます。

<wrapper>
  <b-table v-bind="$attrs" v-on="$listeners">
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>
  </b-table>
</wrapper>

Vue 2.5

ポールの答え を参照してください。

元の答え

次のようにスロットを指定する必要があります。

<wrapper>
  <b-table v-bind="$attrs" v-on="$listeners">
    <!-- Pass on the default slot -->
    <slot/>

    <!-- Pass on any named slots -->
    <slot name="foo" slot="foo"/>
    <slot name="bar" slot="bar"/>

    <!-- Pass on any scoped slots -->
    <template slot="baz" slot-scope="scope"><slot name="baz" v-bind="scope"/></template>
  </b-table>
</wrapper>

レンダリング関数

render(h) {
  const children = Object.keys(this.$slots).map(slot => h('template', { slot }, this.$slots[slot]))
  return h('wrapper', [
    h('b-table', {
      attrs: this.$attrs,
      on: this.$listeners,
      scopedSlots: this.$scopedSlots,
    }, children)
  ])
}

また、おそらくコンポーネントで inheritAttrs をfalseに設定する必要があります。

44
Decade Moon

以下に示すように、v-forを使用して任意の（およびすべての）スロットの受け渡しを自動化しています。この方法の良いところは、デフォルトのスロットを含め、どのスロットを渡す必要があるかを知る必要がないことです。ラッパーに渡されたスロットはすべて渡されます。

<wrapper>
  <b-table v-bind="$attrs" v-on="$listeners">

    <!-- Pass on all named slots -->
    <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>

    <!-- Pass on all scoped slots -->
    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"><slot :name="slot" v-bind="scope"/></template>

  </b-table>
</wrapper>
39
Paul Bastowski