슬롯 Vue3에서 컴포넌트 텔레포트

슬롯 Vue3에서 컴포넌트 텔레포트

구성 요소 라이브러리에 대한 탭 구성 요소를 만들고 싶습니다.나는 되고 싶다.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>

2개의 컴포넌트가 있으며 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나는 클래스와 디브이가 있다.tabs__menu순간이동하고 싶은 게 있어요처럼title소품이 들어가다<tab>슬롯에 표시되는 컴포넌트입니다.탭에서 탭으로 순간이동하고 싶다.

나의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에도 표시되지 않습니다.

텔레포트된 스팬이 표시되지 않는 이유는 무엇입니까?

언급URL : https://stackoverflow.com/questions/68976383/teleport-in-component-from-slot-vue3