vue.js - Vue - 有条件地传递 Prop

Question

我想知道是否有一种好方法可以有条件地将一个或多个 Prop 传递给子组件。

如果有时设置了id，那么我想将其传递下去。我不能将 id 设置为 null，因为 Prop 必须有一个值。我以前使用“v-if ”解决了这个问题:

<survey-wrapper v-if="id" :inputJson="inputJson" :id="id"></survey-wrapper>

<survey-wrapper v-else :inputJson="inputJson"></survey-wrapper>     // <--  no id

但这是一种看起来很糟糕的解决方法，如果组件有很多 Prop ，它就会变成很多代码。如果你有两个可以设置或不设置的 Prop 怎么办？

Answer 1

您可以使用 v-bind 并传递它和包含所有 Prop 的对象。并有条件地像这样添加你的 id Prop 。

<survey-wrapper v-bind="{ inputJson, ...(id ? { id } : {}) }"></survey-wrapper>