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

【问题标题】：Is it possible to make props conditional in Vue, e.g. prop2 depends on the value of prop1?是否可以在 Vue 中使 props 有条件，例如prop2 取决于 prop1 的值？
【发布时间】：2019-05-09 08:47:14
【问题描述】：

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

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

Vue（或 eslint？）然后应该抛出警告或错误，如果 prop 丢失取决于 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

【问题讨论】：

您是否尝试将所需的道具包装在计算中？
我认为你不应该使用 required 作为变量名——它是一个保留字（也许不是变量名，但最终会让人感到困惑）。也许 requiredMsg 就可以了。
require 前面的 : 使其成为布尔值而不是字符串，变量名与 OP 的问题无关 :)
是的，bool 问题没问题，但命名确实与问题有关。用 sn-p 试试 - required 它根本不起作用，而用 requiredMsg 它会。
@JC97，使用计算不起作用，在道具内部使用this 的问题将不起作用，因为它尚未被初始化。 无法读取未定义的属性 isRequired' 使用名为 isRequired 的计算和 prop = required: this.isRequired

标签： vue.js eslint nuxt.js

【解决方案1】：

当缺少所需的道具时，Vue 本身永远不会真正“抛出”错误。 Vue 只会发出[Vue warn]。 documentation 中并没有真正提到它。所以为了证明这一点，如果你运行下面的 sn-p 并缺少所需的道具，你可以看到它仍然可以渲染：

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>

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

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>

【讨论】：