相关疑难解决方法(0)

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

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

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

由于某些服务器端渲染，我希望能够将命名插槽从父组件传递到子组件，但我不确定正确的机制。我能够让顶级模板通过，但名为 slot of 的子级title似乎无法访问。

<div id="app1">
  <parent>
    <template #forchild>
      <div>
        For child template area
        <template #title>Title!</template>
      </div>
    </template>
  </parent>
</div>

const Child = {
  template: `
    <div class="child">
      Child area
      <slot name="forchild">
        <slot name="title"></slot>
      </slot>
    </div>
  `,
};

const Parent = {
  template: `
    <div class="parent">
      Parent Area
      <child>
        <template #forchild>
          <slot name="forchild"></slot>
        </template>
      </child>
    </div>
  `,
  components: {
    Child,
  },
};

new Vue({
  el: '#app1',
  components: {
    Parent,
  }
});

提琴手

这是我的组件（我们称之为 BaseTable）：

  <v-card>
    <v-card-title>
      {{ title }}
      <v-spacer></v-spacer>
      <v-text-field
        :value="value"
        @input="$emit('input', $event)"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :search="value"
      :headers="headers"
      :items="items"
      :loading="loading"
      :loading-text="loadingText"
    >
      <slot></slot> <!--Will pass something here -->
    </v-data-table>
  </v-card>
</template>

然后我想通过操作列中的按钮重用 BaseTable：

 <BaseTable
      :headers="headers"
      :items="items"
      :loading="loading"
      loadingText="Getting items... Please wait"
      title="Transfer Request Processing"
      v-model.lazy="search"
    >
      <template v-slot:item.actions="{ item }">
        <v-btn block color="warning" outlined @click="delete(item)">
          <v-icon left class="mr-2">mdi-icon</v-icon>DELETE
        </v-btn>
      </template>
    </BaseTable>

数据以正确的标题显示，但“删除”按钮却没有。我尝试在组件本身上使用模板（效果很好），但我不希望那样。非常感谢您的帮助。