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

Question

如何让一个组件具有多个模板或以其他方式将任何方法和数据与任何一个特定模板分开？

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

Answer 1

部分是我正在寻找的：

http://012.vuejs.org/api/elements.html#partial(Vue v2中已弃用） http://vuejs.org/guide/components.html#Fragment_Instance

VueJS - 如何使用ajax调用的结果动态初始化模板

Answer 2

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

例如：

<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% 的时间到达那里。

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

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

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

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

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

这是我见过的最接近 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>