Vue - 有条件地传递道具

Question

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

如果有时有一套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

但这是一种看起来很糟糕的解决方法，如果组件有很多 props，它就会变成大量代码。如果您有两个可能已设置或未设置的道具怎么办？

Answer 1

您可以使用v-bind并传递它和包含所有道具的对象。并有条件地添加你的id道具，如下所示。

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

Answer 2

您可以使用v-bind方法动态创建道具列表来完成此操作。

这是一个例子：

<template>
  <div id="app">
    <Component v-bind="propsToPass()"/>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    Component
  },
  data() {
    return {
      passId: true
    }
  },
  methods: {
    propsToPass() {
      const result = {};

      if (this.passId) {
        result.id = 1;
      }

      return result
    }
  }
};
</script>

在上面的示例中，仅当isid时才会传递prop 。passIdtrue