vue-props의 default를 쓰든 안 쓰든 뭐가 달라요.

1852 단어 vue-propsdefault
default를 defaults로 쓰지 않도록 주의하십시오.
예를 들어 mk-test라는 구성 요소는 다음과 같습니다.

<template>
  <div>{{maxLength}}</div>
</template>
<script>
export default {
  props: {
    maxLength: {
      type: Number,
      default: 1
    }
  }
}
</script>
부모 구성 요소가 이렇게 호출될 때:

다음과 같이 렌더링됩니다.

구성 요소의 default:1을 삭제하면 부모 구성 요소 호출이 변하지 않습니다. 이 때 렌더링 결과는 다음과 같습니다.
0
부모 어셈블리가 다음으로 변경된 경우

렌더링 결과는 다음과 같습니다.

요약:
1. default를 사용하여 기본값을 정의할 때 부모 구성 요소에 전송 값이 있으면 부모 값으로 렌더링합니다.부모 구성 요소에 전송 값이 없으면 기본값을 사용합니다.
2. 기본값이 정의되지 않은 경우 상위 어셈블리에 전송 값이 있으면 상위 값으로 렌더링합니다.부모 구성 요소에 전송 값이 없으면 이 유형의 기본값을 사용합니다.유형 및 기본값은 다음과 같습니다.
String ''
Number 0
Array []
Object {}
보충 지식: Vue.js의 new Vue () 와 export default {} 차이
Vue 구성 요소를 생성, 내보내기, 가져오기, 사용할 때, 종종 다른 파일에 있는 new Vue () 와 export default {} 입니다.
우선 Vue는 무엇입니까?주된 이해는 Vue가 하나의 구조 함수이고 생성된 실례는 거대한 대상이며 데이터, 템플릿, 마운트 요소, 방법, 생명주기 갈고리 등 옵션을 포함할 수 있다.
따라서 렌더링을 할 때 Vue 실례를 구성하는 방식으로 해당하는 html 페이지를 렌더링할 수 있다.

new Vue({
  el: '#app'
  ...
})
그러면 export default {} 또?
구성 요소를 복용할 때 사용한 것이다.
만약 우리가 단일 페이지 구성 요소 A 파일을 썼고 다른 파일 B에서 그것을 사용해야 한다고 가정하면 사용해야 한다ES6의 import/export 문법, 파일 A에 출력 인터페이스 export**를 정의하고 파일 B에 import**를 도입한 다음에 Vue 실례 new Vue(**)를 생성하여 도입된 구성 요소를 사용하면 구성 요소 A를 다시 사용하여 파일 B와 결합하여 html 페이지를 생성할 수 있다.
그래서 구성 요소를 다시 사용할 때 export와 new Vue가 하나가 빠지면 안 됩니다.
이상의 이 간단히 vue-props의 default를 쓰든 안 쓰든 차이가 있는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.

좋은 웹페이지 즐겨찾기