javascript 如何在render函数中从父组件槽中获取特定的嵌套子组件？

jvidinwx 于 12个月前发布在 Java

关注(0)|答案(2)|浏览(118)

我使用render函数有条件地渲染一个子组件。下面是一个父组件和子组件的例子：

<Parent :index="1">
  <Child> ... </Child>
  <Child> ... </Child>
  <Child> ... </Child>
</Parent>

字符串
在Parent组件的render函数中，我有以下代码来有条件地呈现子组件，如下所示：

return () => {
  const content = slots.default?.();
  const children = content?.filter(child => child.type === Child);
  const childToRender = children?.[props.index] ?? h('div')
  return h('div', {}, () => [childToRender]);
}

型
代码按预期工作。
但是，我想用另一个组件 Package 一个子组件。例如：

<Parent :index="1">
  <Child> ... </Child>
  <ChildWrapper> ... </ChildWrapper>
  <Child > ... </Child>
</Parent>

型
ChildWrapper.vue看起来像这样：

<template>
  <Child> <slot/> </Child>
</template>

型
显然，滤波器函数（content?.filter(child => child.type === Child)）不会在ChildWrapper分量中拾取Child分量。
如果我检查ChildWrapper VNode的children属性，它会显示一个对象（带有默认的slot函数），而不是我所期望的带有Child组件的数组。所以我的问题是如何获得嵌套的Child组件？

问题背景

假设父组件是Tab或Carousel组件，子组件是TabItem或CarouselItem组件。我创建ChildWrapper组件的原因是为了扩展/覆盖默认Child组件中的一些属性。父组件和子组件来自组件库，而且它不知道ChildWrapper是什么，所以父组件不能控制ChildWrapper应该如何渲染。

JavaScript

来源：https://stackoverflow.com/questions/77750612/how-to-get-specific-nested-child-component-from-parent-component-slot-in-render

2条答案

按热度按时间

yshpjwxd1#

2种方法。
1.创建一个状态（无论您使用哪种状态管理器），如下所示：

exports defineState({
  visibleChildType: 'type'
})

字符串
在父组件中，使用所需的任何逻辑设置状态值。
然后，将条件渲染条件从父对象中移出并移入子对象本身，同时导入状态：like，

// ChildComponent.vue
<template>
  <div v-if="type === visibleChildType" />
</template>

<script>
import visibleChildType from 'parentState'
</script>

型
1.将 Package 器移到子组件本身中。

// ChildComponent.vue
<template>
  <ChildWrapper v-if="needsWrapper">
    <div />
  </ChildWrapper>

  <div v-else=" />
</template>

型
这样，子组件就可以在必要时自我 Package ，而不需要重构父组件。

赞(0）回复(0）举报 12个月前

iih3973s2#

我认为直接从父组件获取特定的、嵌套很深的子组件并不是一种推荐的方法，子组件可能嵌套很深，超过一个层次。
在我看来，使用provide和inject可以无缝地实现目标。
我将提供一个简单的例子来说明这一点。
父组件：

import { provide, ref } from 'vue'

const id = -1;
const current = ref(0)

function getId() {
  id++;
  return id;
}

provide('provide-key', {
  getId,
  current
})

字符串
子组件：

import { inject,computed } from 'vue'

const { getId, current } = inject('provide-key');
const id = getId();
const isShow = computed(() => id === current.value);

型
提供的代码并不完整，但我相信主要思想已经传达。

赞(0）回复(0）举报 12个月前

我来回答

javascript 如何在render函数中从父组件槽中获取特定的嵌套子组件？

问题背景

2条答案

相关问题

热门标签

最新问答