Vue 中包装组件内插槽的传递：实现更灵活的组件交互

vue.js

2024-03-07 03:09:51

Vue 中包装组件内插槽的传递

问题：

在 Vue 中，如何让包装组件将 <b-table> 组件的具名插槽代理给子组件？

解决方法：

我们可以利用 Vue 的 slot 特殊 prop，它允许组件显式定义可以接受的插槽。通过在包装组件中定义插槽并使用 v-slot 指令将插槽传递给子组件，我们可以实现插槽的代理。

详细步骤：

包装组件中定义插槽：

<template>
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">
      <slot name="header"></slot>
      <slot name="body"></slot>
    </b-table>
  </wrapper>
</template>

子组件中使用插槽：

<template>
  <div>
    <v-slot:header>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
    </v-slot>
    <v-slot:body>
      <tbody>
        <tr v-for="item in items">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </v-slot>
  </div>
</template>

示例代码：

包装组件（Wrapper.vue）：

<template>
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">
      <slot name="header"></slot>
      <slot name="body"></slot>
    </b-table>
  </wrapper>
</template>

子组件（Child.vue）：

<template>
  <div>
    <v-slot:header>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
    </v-slot>
    <v-slot:body>
      <tbody>
        <tr v-for="item in items">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </v-slot>
  </div>
</template>