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

Question

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

VueJS中的组件应该是可重用的部分,不是吗？如果我的用户拥有其方法和数据,那么在我的UI的大多数(全部？)中它肯定会表现相同.但是,它的显示方式会有所不同.

Answer 1

我经常通过传入一个 prop 并使用该 prop 进行条件渲染来实现此目的。

例如：

<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 根本没有执行我计算的 prop 或方法。它总是渲染第二个模板，因此 Vue 可能具有加载“最后观察到的模板”的内部逻辑。

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

这是我见过的最接近 React 的无状态哑组件，例如：

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

...

<ShowNumber num={1337} />

如果我的回答让你胃口大开，但你觉得它仍然不是你所需要的，请谷歌“Vue render props”并看看如何在实例render属性中执行疯狂复杂的逻辑。它与 React 的 JSX 非常相似，但我想说，如果你在这个领域，可能有一种更简单的方法来做到这一点。

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

正如我在上面的示例中所示，您也可以非常安全地执行此操作，因为通过组件的数据流是单向且确定的，并且 UI 将始终反映 props 和数据。如果道具或数据发生变化，您的组件将呈现正确的元素。

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

<large-widget v-if="someState === 'one'"></large-widget>

<small-widget v-else-if="someState === 'two'"></small-widget>

<div v-else>WIDGET IS BORKEN</div>