Vue-如何传递包装器组件内的插槽？

vue.js Vue.js

乐米亚

2020-03-11

所以我用模板创建了一个简单的包装器组件：

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

使用$attrs和$listeners传递道具和事件。
工作正常，但是包装器如何将<b-table>命名插槽代理给子代？

第794篇《Vue-如何传递包装器组件内的插槽？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共1个回答
神乐LEY 2020.03.11

我一直在使用来自动传递任何（和所有）插槽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>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android