Question

在将父组件换成另一个组件之后，是否可以重用嵌套在父组件中的Vue组件？

我的动机是我需要拥有像资源组件这样的东西。放置在DOM中而不进行任何重新渲染，并将其交替分配给消费者组件＆＃34;利用其能力。更具体地说，在我的用例中，有一个具有<video>元素的组件，它可以播放不同的源。然后我为每个源提供了不同的组件，例如：视频文件，流，网络摄像头......主要限制来自目标平台，它只能处理有限数量的<video>元素，并在产生意外错误时产生意外错误删除/添加/移动DOM中的<video>元素。

基本上，它与文档中的this example非常相似。但我需要使用此标记重用<input>元素：

<template v-if="loginType === 'username'">
    <label>Username</label>
    <foo>
        <input placeholder="Enter your username">
    </foo>
</template>
<template v-else>
    <label>Email</label>
    <bar>
        <input placeholder="Enter your email address">
    </bar>
</template>

两个父组件（<foo>和<bar>）都不应该向DOM呈现任何内容，而<input>应保留在DOM中，而不会在HTMLElement中进行任何移动或重新呈现或更改状态。

到目前为止，我已尝试过这些实现，但它们都没有完全满足我的要求：

我尝试过使用key，但它似乎仅适用于具有相同名称的组件。 <foo key="baz">和<bar key="baz">无法重复使用嵌套<input>。
我尝试在具有相同名称的不同组件上使用key，但结果保持不变。
我尝试为abstract: true和<foo>组件添加未记录的配置<bar>（与示例中的<template>相同），但同样没有重用{{1可能是因为组件名称不同。
我尝试过使用<input>组件，但它似乎重用虚拟DOM而不是真正的DOM，这是我需要的。
我已设法为keep-alive和<input>组件重复使用functional: true组件和<foo>组件。但这会使组件成为无状态（无反应数据）和无实体（无此上下文），因此它们无法与<bar>组件进行有效通信。
我尝试将<input>和<foo>组件替换为另一个组件<bar>，以便在<baz>工作时重复使用。但是我没有根据当前的要求从key到<baz>和<foo>实施某种实施授权。

在Vue中重用嵌套组件

0 个答案: