javascript - 如何向模板外部的组件添加 Prop

Question

所以我们就说我有一个 HelloWorld我想多次导入该组件并为每个组件分配一些 Prop (因为每个实例都会做自己的事情)。通常你会做这样的事情:

为了简单起见，我没有使用正确的语法。

  import HelloWorld from "./components/HelloWorld";

  <HelloWorld v-if="which" title="0" key="1"/>
  <HelloWorld v-else title="1"/>

但是，我想知道是否有一种方法可以使用已分配的 Prop 导入它们，例如:

import HelloWorld from "./components/HelloWorld";
import HelloWorld1 from "./components/HelloWorld";

HelloWorld.props = { title: "1" } // this doesn't work
HelloWorld1.props = { title: "2" } // this doesn't work

为了使用<component>

例如

<component :is="which"/>

which = "HelloWorld" || "HelloWorld1"

Answer 1

组件的 props 只能在组件定义对象中设置。

您似乎正在尝试根据 which 的值传递不同的 prop 值。您可以通过将对象传递给 v-bind 来做到这一点:

<HelloWorld v-bind="which ? { title: '0', key: '1' } : { title: '1' }"/>