Question

我如何拥有一个包含多个模板的组件，或者将任何方法和数据与任何一个特定模板分开？

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

Answer 1

部分是我正在寻找的：

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

VueJS - How to initialize a template dynamically with the result of an ajax call

Answer 2

我通常通过传递一个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％的时间内使您达到目标，除非“单个root包装程序”问题引起您麻烦。

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

也许您可以只创建两个组件，每个组件比否则要简单。降低圈复杂度总是好的。

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

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

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

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

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

...

<ShowNumber num={1337} />

如果我在这里的答案正在使您的胃口变大，但是您仍然觉得自己的胃口还不够，请使用Google“ Vue渲染道具”，看看如何在{{1}内执行疯狂复杂的逻辑}实例属性。它与React的JSX非常相似，但是我要说的是，如果您在这个领域，可能有一种更简单的方法来实现。

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

您也很安全，就像我在上面的示例中显示的那样，因为通过组件的数据流是单向的和确定性的，并且UI始终是道具和数据的反映。如果道具或数据发生变化，您的组件将呈现正确的元素。

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

render

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

2 个答案: