是否可以在 Vue 中使 props 有条件，例如 prop2 取决于 prop1 的值？

Question

我有一个用例，我需要将特定的错误消息传递给自定义组件。当且仅当某个 prop 设置为true。但我怀疑this.required道具中是否可用，因为它不会被初始化。

//custom component
props: {
  required: {
    type: Boolean,
    default: false
  },
  requiredErrorMsg: {
    type: String,
    default: '',
    required: this.required
  }
}

如果 prop 丢失，Vue（或 eslint？）应该抛出警告或错误，具体取决于是否required设置为 true。

<Custom :required="true" /> //missing prop error
<Custom :required="true" required-error-msg="this is an error"/> //no issues

---

目前使用：
nuxt v2.3.4
eslint v5.0.1

Answer 1

当缺少必需的 prop 时，Vue 本身永远不会真正“抛出”错误。Vue 只会发出一个[Vue warn]. 文档中并没有真正提到它。因此，为了证明这一点，如果您在缺少必需的 prop 的情况下运行下面的代码片段，您可以看到它仍然可以渲染：

Vue.component('custom-component', {
  template: `
    <div>
      required:<br>
      {{ required }}
      <br><br>
      requiredErrorMessage:<br>
      {{ requiredErrorMessage }}
    </div>
  `,
  props: {
    required: {
      type: Boolean,
      default: false
    },
    requiredErrorMessage: {
      type: String,
      default: '',
      required: true  // <-- Explicitly set to true
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom-component
    :required="true"
  />
</div>

如果您希望它实际抛出（停止执行），您需要throw使用computed属性显式地将其设置为 。如果您在使用的throw计算属性中显式运行下面的代码片段，您应该会看到它根本不会渲染：

Vue.component('custom-component', {
  template: `
    <div>
      required:<br>
      {{ required }}
      <br><br>
      requiredErrorMessage:<br>
      {{ errorMessage }}
    </div>
  `,
  props: {
    required: {
      type: Boolean,
      default: false
    },
    requiredErrorMessage: {
      type: String,
      default: '',
    }
  },
  computed: {
    errorMessage(){
      if (this.required === true && !this.requiredErrorMessage)
        // Explicitly call `throw` when required conditions are not met
        throw new Error('Missing prop error.');
        
      return this.requiredErrorMessage;
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom-component
    :required="true"
  />
</div>