是否可以在Vue中使道具成为条件，例如prop2取决于prop1的值吗？

Question

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

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

如果根据required是否设置为true缺少道具，Vue（或eslint？）应该抛出警告或错误。

<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

当缺少所需的道具时，Vue本身永远不会真正“抛出”错误。 Vue将仅发出[Vue warn]。 documentation中并未真正提及。因此，要证明这一点，如果使用缺少的必需道具运行下面的代码片段，则可以看到它仍然可以渲染：

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。如果您在 used 计算属性内使用显式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>