Vuejs：如何有条件地附加道具？答案

【问题标题】：Vuejs : How to Attach props conditionally?Vuejs：如何有条件地附加道具？
【发布时间】：2020-11-23 11:20:11
【问题描述】：

我有一个组件 A，它被导入另一个组件 B。当在组件 B 中单击一个按钮时，组件 A 以模式打开。组件 A 称为 blogPost。有 2 个用例。

1 单击按钮时我们需要传递 2 个道具。

<blogPost :token_id="tokenId" :token_url="tokenUrl"></blogPost>

2 点击按钮时不需要道具的一种

<blogPost></blogPost>

有什么方法可以有条件地附加道具。我想根据仪表板中的条件附加道具。如果 inDashboard 为真，我想要案例 1。如果 inDashboard 为假，我想要案例 2。有没有办法在一行中实现这一点。现在我在单独的模态中分别为它们提供了 2 行。

【问题讨论】：

【解决方案1】：

v-bind 可以派上用场。

<blogPost v-bind="inDashboard && postProps"></blogPost>

{
  data: () => ({
    postProps: {
      token_id: 123,
      token_url: 'https://some.url'
    }
  })
}

这样做是，如果条件失败，它不会评估第二个表达式，它基本上将它绑定到 false 并且将没有效果或被忽略（v-bind 在内部处理这个问题）；否则，它将一次性分配值（道具）。

【讨论】：

【解决方案2】：

你可以这样实现

<blogPost :token_id="inDashboard?tokenId:null" :token_url="inDashboard?tokenUrl:null"></blogPost>

然后在 blogPost 中检查 token_id 和 token_url 是否有值

【讨论】：