一个VueJS组件，带有多个模板

One VueJS Component with multiple templates

本文关键字：VueJS 组件 一个      更新时间：2023-09-26

如何让一个组件具有多个模板，或者以其他方式将任何方法和数据从任何一个特定模板中分离出来

VueJS中的组件应该是可重用的，不是吗？如果我有一个用户有它的方法和数据，那么它在我的大部分（所有？）UI中的行为肯定是一样的。但是，它的显示方式会有所不同。

我经常通过传递一个道具并使用该道具进行条件渲染来实现这一点。

例如：

<template>
    <div>
        <div v-if="isActive">RADICAL ACTIVE STATE</div>
        <div v-if="!isActive">YOLO NOT ACTIVE</div>
    </div>
<template>
<script>
export default {
    props: {
        isActive: {
            type: Boolean,
            required: true,
        },
    },
};
</script>

这可能会让你在80%的时间内到达那里，除非"单根包装器"的东西给你带来了问题。

在这种情况下，你肯定有选择。其中之一可以是使用槽并控制上游的条件呈现。这可能会减少标记。

也许您可以创建两个组件，每个组件都比其他组件更简单。减少圈复杂度总是好的。

您还可以在模板本身<template v-if="">上抛出v-if。

根据我今天的经验，不能在一个文件组件中使用两个模板（就像我上面展示的代码中的那个）。Vue似乎没有正确解析模板。Vue根本没有执行我的计算道具或方法。它总是呈现第二个模板，因此Vue可能具有内部逻辑，从而加载"最后一个观察到的模板"。

一个人可能会发现阅读很有帮助http://vuejs.org/guide/components.html#Fragment_Instance因为它说明了CCD_ 2实例道具。

它是我见过的最接近React的等价物，相当于一个无状态的哑组件，例如：

const ShowNumber = ({ num }) => (
    <div>{num}</div>
)
...
<ShowNumber num={1337} />

如果我在这里的答案让你胃口大开，但你觉得它仍然不是你所需要的，那么谷歌"Vue渲染道具"，看看你如何在render实例道具中执行疯狂的复杂逻辑。它与React的JSX非常相似，但我要说的是，如果你在这个领域，可能有一种更简单的方法

我可能建议只创建两个单独的文件组件，每个组件中有一个模板，或者找到一种使用插槽并从上游控制行为的方法。

像我在上面的例子中所展示的那样，这样做也很安全，因为通过组件的数据流是单向的和确定性的，UI将始终是道具和数据的反映。如果道具或数据发生更改，组件将呈现正确的元素。

您可以在上游父组件中执行此操作：

<large-widget v-if="someState === 'one'"></large-widget>
<small-widget v-else-if="someState === 'two'"></small-widget>
<div v-else>WIDGET IS BORKEN</div>
相关文章：