Question

实际上，我使用的是PrimeVue，我想在DataView上写一层。 DataView具有以下插槽：

<template>
    ...
    <slot name="header"></slot>
    <slot name="paginatorLeft"></slot>

我的图层名称是MyDataView，在这里我像这样使用PrimeVue的DataView：

<template>

    <DataView  :lazy="lazy"
               :loading="isLoading"
               :paginator="paginator"
               :rows="offset"
               :value="items">

            <slot name="row"></slot>

    </DataView>

</template>

我想从另一个组件中使用MyDataView，并且想注入一个header和paginatorLeft模板，但是我不能。

我尝试过：（MyAnotherComponent）

<template>
    <MyDataView>
       <template #row>
          <template #header>
            Hello
          </template>
       </template>
    </MyDataView>
</template>

和

<template>
    <MyDataView>
       <template #header>
            Hello
       </template>
       <template #row>

       </template>
    </MyDataView>
</template>

它不起作用。有人知道如何从另一个组件将模板插入DataView到MyDataView内吗？谢谢！

+ 信息

我知道在我的图层中有一个解决方案，但是我想找到一个更好的解决方案：

<template v-if="this.$slots.header">
     <slot name="header" ></slot>
</template>

Answer 1

不确定哪个会更好，但这是我用来嵌套插槽的一些东西

在您的MyDataView

<template>
  <div class="wrapper">
    <Data-view>
      <template slot="header">
        <slot name="header"></slot>
      </template>
      <template slot="paginatorLeft">
        <slot name="paginatorLeft"></slot>
      </template>
    </data-view>
  </div>
</template>

在您的父组件中

<template>
<div id="app">
    <MyDataView>
      <template slot="header">
        <h1> Hello </h1>
      </template>
     <template slot="paginatorLeft">
       <p> foo </p>
      </template>
    </test>
  </div>
</template>

Vue.js嵌套广告位

1 个答案: