Vue 3 如何获取有关 $children 的信息

如何获取有关

关注

发信

关注(28)粉丝(399)

Vue 3 如何获取有关 $children 的信息

本文介绍了Vue 3 如何获取有关 $children 的信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我在 Tabs 组件中使用 VUE 2 的旧代码:

created() {this.tabs = this.$children;}

标签:

<标签标题=标签标题">....</Tab><标签标题=标签标题">....</Tab></Tabs>

VUE 3:如何使用组合 API 在 Tabs 组件中获取有关儿童的一些信息?获取长度，迭代它们，并创建标签页眉，......等等?有任何想法吗?(使用组合 API)

解决方案

这是我的 Vue 3 组件.我使用提供来获取子 Tab 组件中的信息.

<div class="tabs"><div class="tabs-header">

<插槽></插槽>

</模板><script lang="ts">从vue"导入{defineComponent、reactive、provide、onMounted、onBeforeMount、toRefs、VNode}；接口 TabProps {标题:字符串；}导出默认defineComponent({名称:标签"，设置(_，{插槽}){const 状态 = 反应性({选择索引:0，tabs: [] 作为 VNode[],计数:0});提供(TabsProvider"，状态)；const selectTab = (i: number) =>{state.selectedIndex = i;};onBeforeMount(() => {如果(插槽.默认){state.tabs = slot.default().filter((child) => child.type.name === "Tab");}});onMounted(() => {选择标签(0)；});返回 {...toRefs(state), selectTab};}});

标签组件:

导出默认defineComponent({名称:标签"，设置() {常量索引 = ref(0);const isActive = ref(false);const tabs = 注入(TabsProvider")；手表(() =>tabs.selectedIndex,() =>{isActive.value = index.value === tabs.selectedIndex;});onBeforeMount(() => {index.value = tabs.count;tabs.count++;isActive.value = index.value === tabs.selectedIndex;});返回 {index, isActive};}});<div class="tab"v-show=isActive"><插槽></插槽>

This my old code with VUE 2 in Tabs component:

created() {
   this.tabs = this.$children;
}

Tabs:

<Tabs>
  <Tab title="tab title">
    ....
  </Tab>
  <Tab title="tab title">
    ....
  </Tab>
</Tabs>

VUE 3:How can I get some information about childrens in Tabs component, using composition API? Get length, iterate over them, and create tabs header, ...etc? Any ideas? (using composition API)

解决方案

This is my Vue 3 component now. I used provide to get information in child Tab component.

<template>
  <div class="tabs">
    <div class="tabs-header">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
        :class="{'tab-selected': index === selectedIndex}"
        class="tab"
      >
        {{ tab.props.title }}
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue";

interface TabProps {
  title: string;
}

export default defineComponent({
  name: "Tabs",
  setup(_, {slots}) {
    const state = reactive({
      selectedIndex: 0,
      tabs: [] as VNode<TabProps>[],
      count: 0
    });

    provide("TabsProvider", state);

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

    onBeforeMount(() => {
      if (slots.default) {
        state.tabs = slots.default().filter((child) => child.type.name === "Tab");
      }
    });

    onMounted(() => {
      selectTab(0);
    });

    return {...toRefs(state), selectTab};
  }
});
</script>

Tab component:

export default defineComponent({
  name: "Tab",
  setup() {
    const index = ref(0);
    const isActive = ref(false);

    const tabs = inject("TabsProvider");

    watch(
      () => tabs.selectedIndex,
      () => {
        isActive.value = index.value === tabs.selectedIndex;
      }
    );

    onBeforeMount(() => {
      index.value = tabs.count;
      tabs.count++;
      isActive.value = index.value === tabs.selectedIndex;
    });
    return {index, isActive};
  }
});


<div class="tab" v-show="isActive">
    <slot></slot>
</div>

这篇关于Vue 3 如何获取有关 $children 的信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 16:01