2

我想为我的组件库创建选项卡组件。我希望组件像这样工作tabs：tab

<b-tabs>
  <b-tab
    :title="'tab 1'"
    :is-active="false"
  >
    tab content1
  </b-tab>
  <b-tab
    :title="'tab 2'"
    :is-active="false"
  >
    tab content2
  </b-tab>
  <b-tab
    :title="'tab 3'"
    :is-active="true"
  >
    tab content3
  </b-tab>
</b-tabs>

所以我们有两个组件，它们有一些 props，包括 is-active，默认情况下是 false。

父组件 -tabs.vue将是这样的

<template>
  <section :class="mode ? 'tabs--light' : 'tabs--dark'" @change-tab="selectTab(2)">
    <div :id="`tabs-top-tabId`" class="tabs__menu"></div>
    <slot></slot>
  </section>
</template>

这里我们有我们单曲的包装器tab，它将使用插槽显示在这里。在这个“父”组件中，我们还持有selectedIndex指定选择哪个选项卡以及更改此值的功能。

  setup () {
    const tabId = Math.random() // TODO: use uuid;
    const data = reactive<{selectedIndex: number}>({
      selectedIndex: 0
    })

    const selectTab = (i: number) => {
      data.selectedIndex = i
    }

    return {
      tabId,
      ...toRefs(data),
      selectTab
    }
  }

TLDR现在你们可能已经注意到了，tab.vue我有一个带有类的 div tabs__menu，我想将一些东西传送到其中。当title道具进入<tab>由 tabs.vue 中的插槽显示的组件时，我想从一个选项卡传送到另一个选项卡。

我的tab.vue：

<template>
  <h1>tab.vue {{ title }}</h1>
  <div class="tab" v-bind="$attrs">
    <teleport :to="`#tabs-top-tabId`" @click="$emit('changeTab')">
      <span style="color: red">{{ title }}</span>
    </teleport>
    <keep-alive>
      <slot v-if="isActive"></slot>
    </keep-alive>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String as PropType<string>,
      required: true
    },
    isActive: {
      type: Boolean as PropType<boolean>,
      required: true
    }
    // tabId: {
    //   type: Number as PropType<number>, // TODO: change to string after changing it to uuid;
    //   required: true
    // }
  }
})
</script>

但是，这span不会被传送。当我为这篇文章运行第一个片段时，我看不到它的显示，也没有在 DOM 中看到它。

vue3 传送

为什么传送跨度不显示？

4

0 回答 0