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

どうやら、Vueが 拳レベルのオブジェクトの小道具が未定義でない場合にのみ、ネストされたプロパティのデフォルト値を解析します。

はい、外側のオブジェクトを持たないと内部またはネストされたプロパティを持つことができないため、意味があります。

だから私はそれだけでデフォルト{}として最初のレベルのオブジェクトのためのemtpyオブジェクトを設定しても、より読みやすいと思うし、あなたが怒鳴るの例のように、未定義またはヌルに対して独自の守備の検証を行う必要があります

<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> 

Answer 2

データ構造を使いやすく、できるだけフラットにする方が良いと思います。 Vueのネストされた小道具は決して良い選択ではないためです。

あなたのVueコンポーネントで述べたoptionsには、多くのプロパティがあります。

例：

props: { 
    options: { 
    bookAttributes: { 
     colorAttributes: { coverColor: 'red', ribbonColor: 'green' }, 
     sizeAttributes: { coverSize: 10, ribbonSize: 2 }, 
     ... 
    } 
    } 
} 

あなたがより良い理解のために、このような彼らがフラットにすることができます。

props: { 
    coverSize: 10, 
    coverColor: 'red', 
    ribbonColor: 'green, 
    ribbonSize: 2 ... 
} 

そして、あなたとあなたの同僚は喜んでこのようなあなたのコンポーネントを使用することができます。

<your-component> 
    coverSize="15" 
    coverColor="blue" 
    ribbonColor="red" 
    ribbonSize="3" 
</your-component> 

幸運ともあなたを願っています。