javascript - Slot Inheritance in Vue.js 3 - Stack Overflow

admin管理员组

文章数量:1389750

I'm trying to understand how/if I can define some sort of slot inheritance in Vue.js v3. I have a Container class that defines 2 slots: title and items. I extend Container in my Grid class, and I define the items slot in there. When I go to use my Grid class, I would like to define the title slot. Fiddle for reference.

Container.vue

<template>
  <div>
    <header v-if="showTitle">
      <slot name="title" />
    </header>

    <main v-if="showItems">
      <slot name="items" />
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyContainer",
  puted: {
    showTitle() {
      return !!this.$slots.title;
    },
    showItems() {
      return !!this.$slots.items;
    },
  },
});
</script>

Grid.vue

<template>
  <MyContainer>
    <template #items>
      <span>Here are my items</span>
    </template>
  </MyContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MyContainer from "@/ponents/base/Container";

export default defineComponent({
  name: "MyGrid",
  extends: MyContainer,
  ponents: { MyContainer },
});
</script>

App.vue

<template>
  <div id="app">
    <MyGrid>
      <!-- How can I pass this along to MyGrid's base class? -->
      <template #title>
        <span>This is my title!</span>
      </template>
    </MyGrid>
  </div>
</template>

<script>
import MyGrid from "@/ponents/base/Grid";

export default {
  name: "App",
  ponents: {
    MyGrid,
  },
};
</script>

The issue is in App.vue where I have the ment in the template--I would like to pass along defining the slot in there. Is this possible?

I'm trying to understand how/if I can define some sort of slot inheritance in Vue.js v3. I have a Container class that defines 2 slots: title and items. I extend Container in my Grid class, and I define the items slot in there. When I go to use my Grid class, I would like to define the title slot. Fiddle for reference.

Container.vue

<template>
  <div>
    <header v-if="showTitle">
      <slot name="title" />
    </header>

    <main v-if="showItems">
      <slot name="items" />
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyContainer",
  puted: {
    showTitle() {
      return !!this.$slots.title;
    },
    showItems() {
      return !!this.$slots.items;
    },
  },
});
</script>

Grid.vue

<template>
  <MyContainer>
    <template #items>
      <span>Here are my items</span>
    </template>
  </MyContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MyContainer from "@/ponents/base/Container";

export default defineComponent({
  name: "MyGrid",
  extends: MyContainer,
  ponents: { MyContainer },
});
</script>

App.vue

<template>
  <div id="app">
    <MyGrid>
      <!-- How can I pass this along to MyGrid's base class? -->
      <template #title>
        <span>This is my title!</span>
      </template>
    </MyGrid>
  </div>
</template>

<script>
import MyGrid from "@/ponents/base/Grid";

export default {
  name: "App",
  ponents: {
    MyGrid,
  },
};
</script>

The issue is in App.vue where I have the ment in the template--I would like to pass along defining the slot in there. Is this possible?

• javascript
• vue.js
• vue-ponent
• vuejs3

Share Improve this question Follow edited Jun 5, 2021 at 21:46 Boussadjra Brahim 1 asked Jun 5, 2021 at 21:04 incutonezincutonez 3,34199 gold badges5252 silver badges104104 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

According to this, I would have to define a template that essentially passes on any slots defined on the instance. So in my Grid.vue class, I would add this code:

<template>
  <MyContainer>
    <template #items>
      <span>Here are my items</span>
    </template>
    <!-- Added this template -->
    <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
      <slot :name="name" v-bind="slotData" />
    </template>
  </MyContainer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import MyContainer from "@/ponents/base/Container";

export default defineComponent({
  name: "MyGrid",
  extends: MyContainer,
  ponents: { MyContainer },
});
</script>

In Grid ponent define the title slot then inside it render its children dynamically using ponent :

 <MyContainer>
    <template #title>
      <ponent v-for="(el, i) in $slots.title()" :is="el" :key="i">
      </ponent>
    </template>
    <template #items>
      <span>Here are my items</span>
    </template>
  </MyContainer>
</template>

DEMO

本文标签： javascriptSlot Inheritance in Vuejs 3Stack Overflow