Vue - 嵌套屬性的默認值

如何設置對象prop的嵌套屬性的默認值？Vue - 嵌套屬性的默認值

顯然，只有在第一級Object prop爲undefined時，Vue纔會解析嵌套屬性的默認值。

實施例：

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

來源

2017-10-12 Danilo Sampaio

顯然，Vue的解析嵌套屬性的默認值僅當拳頭級對象prop不是未定義。

是的，它是有道理的，因爲如果你沒有外部對象，你將無法擁有內部或嵌套屬性。

所以我覺得剛纔設置爲默認{}爲第一級對象的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>

來源

2017-10-13 02:51:14 ricardoorellana

**編輯**：顯然，只有第一級別的對象prop ** **是未定義的，Vue纔會解析嵌套屬性的默認值。（對於輸入錯誤） –

在我的示例中，如果第一級對象未定義： '' 'options.nested'的值設置爲默認值。但是，通過部分'option'屬性： let options = {} '' 部分選項對象不會與嵌套屬性的默認值合併。 –

我設法解決這個定義的計算屬性，返回this.options.nested或默認值。但我不確定這是最好的方法。 –

我認爲最好讓您的數據結構易於使用並且儘可能平坦。因爲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>

祝你好運，祝你順利。

來源

2017-10-13 07:23:20 daiyanze

對於一個簡單的選項對象，它工作正常。但是，當我有一個複雜的組件時，平坦的道具對象可能太冗長了： childCompCoverSize =「15」 –

如果組件很複雜，只需將其分解爲小組件。「家長 - 孩子」模式應該爲您提供傳遞道具方便。 – daiyanze

Vue - 嵌套屬性的默認值

回答

相關問題