gpt4 book ai didi

javascript - 一个具有多个模板的 VueJS 组件

转载 作者:数据小太阳 更新时间:2023-10-29 04:47:33 24 4
gpt4 key购买 nike

我怎样才能拥有一个具有多个模板的组件,或者如何将任何方法和数据与任何一个特定模板分开?

VueJS 中的组件应该是可重用的部分,不是吗?如果我有一个用户使用它的方法和数据,它肯定会在我的大部分(全部?)用户界面中表现相同。但是,它的显示方式会有所不同。

最佳答案

我经常通过传递一个 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实例 Prop 。

这是我见过的最接近 React 的无状态dumb组件,例如:

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

...

<ShowNumber num={1337} />

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

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

像我在上面的示例中展示的那样,您也可以很安全地执行此操作,因为通过组件的数据流是单向和确定性的,并且 UI 将始终反射(reflect) props 和数据。如果 Prop 或数据发生变化,您的组件将呈现正确的元素。

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

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

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

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

关于javascript - 一个具有多个模板的 VueJS 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33430576/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com