vue.js - Vue - 嵌套属性的默认值

Question

如何设置对象 prop 的嵌套属性的默认值？

显然，只有当第一级对象 prop 为 undefined 时，Vue 才会解析嵌套属性的默认值。

例子:

Vue.component('example', {
  props: {
    options: {
       type: Object,
       default: function() {
          return {
             nested: {
                type: Object,
                default: function(){
                   return 'default value'
                }
             }
          }
       }
    }
})

Answer 1

Apparently, Vue parse default value of nested properties only if the fist level Object prop is not undefined.

是的，这是有道理的，因为如果你没有外部对象，你将无法拥有内部或嵌套属性。

所以我认为将第一级对象的空对象设置为默认 {} 更具可读性，您应该针对 undefined 或 < strong>null，就像下面的例子:

<script>
  export default {
    props: {
      option: {
        type: Object,
        default: () => {},
        required: false
      }
    },
    computed: {
      optionReceived: function () {
        const defaultNestedValue = 'Some default value'
        const option = this.option.nested || defaultNestedValue;
        return option;
      }
    }
  }
</script>