Vue - 중첩된 속성의 기본값

Vue - 중첩된 속성의 기본값

객체의 중첩된 속성의 기본값을 설정하려면 어떻게 해야 합니까?prop?

Vue는 첫 번째 수준 객체의 경우에만 중첩된 속성의 기본값을 구문 분석합니다.prop이undefined.

예제:

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

보아하니 Vue는 첫 번째 수준의 Object prop가 정의되지 않은 경우에만 중첩된 속성의 기본값을 구문 분석합니다.

네, 외부 객체가 없으면 내부 속성이나 중첩 속성을 가질 수 없기 때문에 의미가 있습니다.

그래서 디폴트로 설정하면 더 읽기 쉬울 것 같아요.{}첫 번째 레벨 오브젝트의 emtpy 오브젝트입니다.아래 예시와 같이 정의되지 않은 오브젝트 또는 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>

항상 데이터 구조를 사용하기 쉽고 가능한 한 평평하게 만드는 것이 좋다고 생각합니다.왜냐하면 Vue에 있는 네스트 소품들은 절대 좋은 선택이 아니기 때문이다.

가정하다optionsVue 컴포넌트에 기재되어 있습니다.

예제:

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>

행운을 빌고 잘 지내길 바라.

언급URL : https://stackoverflow.com/questions/46720152/vue-default-values-of-nested-properties