Vue - 嵌套属性的默认值

Question

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

显然，Vue 仅在第一级 Objectprop为时才解析嵌套属性的默认值undefined。

例子：

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

Answer 1

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

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

所以我认为它更易读，只需将{}第一级对象的 emtpy 对象设置为默认值，您应该针对undefined或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>