Vue 구성 요소 옵션 props 인 스 턴 스 상세 설명

앞 말
구성 요소 가 받 아들 이 는 옵션 은 대부분 Vue 인 스 턴 스 와 같 으 며,props 옵션 은 구성 요소 에서 매우 중요 한 옵션 입 니 다.Vue 에서 부자 구성 요소 의 관 계 는 props down,events up 으로 요약 할 수 있 습 니 다.부모 구성 요 소 는 props 를 통 해 하위 구성 요소 에 데 이 터 를 전달 하고 하위 구성 요 소 는 events 를 통 해 부모 구성 요소 에 메 시 지 를 보 냅 니 다.본 고 는 Vue 구성 요소 옵션 props 를 상세 하 게 소개 할 것 입 니 다.

정적 props
구성 요소 인 스 턴 스 의 역할 영역 은 고립 되 어 있 습 니 다.이것 은 하위 구성 요소 의 템 플 릿 에서 부모 구성 요소 의 데 이 터 를 직접 인용 할 수 없다 는 것 을 의미한다.하위 구성 요소 에 부모 구성 요소 의 데 이 터 를 사용 하려 면 하위 구성 요소 의 props 옵션 을 사용 해 야 합 니 다.
Prop 를 사용 하여 데 이 터 를 전달 하 는 것 은 정적 과 동적 두 가지 형식 을 포함 합 니 다.다음은 정적 props 를 소개 합 니 다.
하위 구성 요 소 는 props 옵션 으로 원 하 는 데 이 터 를 명시 해 야 합 니 다.

var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

정적 Prop 은 하위 구성 요소 가 부모 구성 요소 에 있 는 자리 표시 자 에 특성 을 추가 하 는 방식 으로 값 을 전달 하 는 목적 을 달성 합 니 다.

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
//      
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

명명 규칙
props 성명 의 속성 에 있어 서 부모 급 HTML 템 플 릿 에서 속성 명 은 중간 선 쓰기 가 필요 합 니 다.

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

하위 props 속성 성명 시 작은 낙타 봉 이나 중선 표기 법 을 사용 해도 됩 니 다.하위 템 플 릿 은 부모 급 에서 들 려 오 는 변 수 를 사용 할 때 해당 하 는 작은 낙타 봉 쓰기 가 필요 합 니 다.

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}

동적 props
템 플 릿 에서 부모 구성 요소 의 데 이 터 를 하위 템 플 릿 의 props 에 동적 으로 연결 하려 면 일반적인 HTML 특성 과 유사 합 니 다.바로 v-bind 를 사용 하 는 것 입 니 다.부모 구성 요소 의 데이터 가 변 할 때마다 이 변 화 는 하위 구성 요소 에 전 달 됩 니 다.

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

전달 숫자
초보 자 들 이 자주 저 지 르 는 실 수 는 글자 의 문법 전달 수 치 를 사용 하 는 것 이다.

<!--          "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}    {{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
//      
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

숫자 가 아 닌 문자열'1'이라는 글자 prop 이기 때 문 입 니 다.실제 number 를 전달 하려 면 v-bind 를 사용 하여 값 을 JS 표현 식 으로 계산 해 야 합 니 다.

<!--       number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

또는 동적 props 를 사용 하여 data 속성 에 대응 하 는 숫자 1 을 설정 할 수 있 습 니 다.

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};

props 인증
구성 요소 의 props 에 인증 규격 을 지정 할 수 있 습 니 다.들 어 오 는 데이터 가 규격 에 맞지 않 으 면 Vue 에서 경 고 를 보 냅 니 다.구성 요소 가 다른 사람 에 게 사 용 될 때 유용 합 니 다.
인증 규격 을 지정 하려 면 문자열 배열 대신 대상 형식 을 사용 해 야 합 니 다.

Vue.component('example', {
 props: {
 //        (`null`           )
 propA: Number,
 //     
 propB: [String, Number],
 //        
 propC: {
 type: String,
 required: true
 },
 //   ，    
 propD: {
 type: Number,
 default: 100
 },
 //   /                 
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 //        
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
})

type 은 아래 원생 구조 기 일 수 있 습 니 다.

String
Number
Boolean
Function
Object
Array
Symbol

type 도 사용자 정의 구조 기 함수 일 수 있 습 니 다.instanceof 검 측 을 사용 할 수 있 습 니 다.
prop 인증 이 실 패 했 을 때 Vue 는 경 고 를 던 집 니 다(개발 버 전 을 사용한다 면).props 는 구성 요소 인 스 턴 스 를 만 들 기 전에 검증 하기 때문에 default 이나 vaidator 함수 에 서 는 data,coptute,methods 등 인 스 턴 스 속성 을 사용 할 수 없습니다.
하위 구성 요소 에 들 어 오 는 message 가 숫자 가 아니라면 경 고 를 던 지 는 간단 한 예 입 니 다.

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
//      
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

숫자 123 이 들 어 오 면 경고 알림 이 없습니다.문자열'123'을 입력 했 을 때 결 과 는 다음 과 같 습 니 다.

위 코드 에서 하위 구성 요소 의 내용 을 다음 과 같이 수정 하면 인증 함 수 를 사용자 정의 할 수 있 습 니 다.함수 가 false 로 되 돌아 갈 때 경고 알림 을 출력 합 니 다.

var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

부모 구성 요소 에 msg 값 을 1 로 전송 합 니 다.10 보다 작 기 때문에 경고 알림 을 출력 합 니 다.

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

단 방향 데이터 흐름
prop 는 단 방향 으로 연결 되 어 있 습 니 다.부모 구성 요소 의 속성 이 변 할 때 하위 구성 요소 에 전 달 됩 니 다.그러나 거꾸로 되 지 않 습 니 다.이것 은 하위 구성 요소 가 부모 구성 요소 의 상 태 를 의도 하지 않 게 수정 하 는 것 을 방지 하기 위해 서 입 니 다.이것 은 응용 데이터 흐름 을 이해 하기 어렵 게 할 것 입 니 다.
또한,부모 구성 요소 가 업 데 이 트 될 때마다 하위 구성 요소 의 모든 prop 는 최신 값 으로 업 데 이 트 됩 니 다.이것 은 하위 구성 요소 내부 에서 prop 를 바 꾸 지 말 아야 한 다 는 것 을 의미한다.이렇게 하면 Vue 가 콘 솔 에서 경 고 를 합 니 다.
다음은 전형 적 인 예 이다.

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 <span>     </span>
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 <span>     </span>
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
//      
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

부모 구성 요소 데이터 가 변 할 때 하위 구성 요소 데이터 가 변 합 니 다.하위 구성 요소 데이터 가 변 할 때 부모 구성 요소 데이터 가 변 하지 않 고 콘 솔 에 경 고 를 표시 합 니 다.

prop 의 데 이 터 를 수정 하 는 데 는 보통 다음 과 같은 두 가지 이유 가 있 습 니 다.
1.prop 를 초기 값 으로 전송 한 후 하위 구성 요 소 는 부분 데이터 로 사용 하려 고 합 니 다.
2.prop 는 초기 값 으로 들 어 오고 하위 구성 요소 에서 다른 데이터 출력 으로 처리 합 니 다.
이 두 가지 상황 에 대한 정확 한 대응 방식 은?
1.부분 변 수 를 정의 하고 prop 의 값 으로 초기 화 합 니 다.

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

2.계산 속성 을 정의 하고 prop 의 값 을 처리 하 며 되 돌려 줍 니 다.

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

[주의]JS 의 대상 과 배열 은 참조 형식 으로 같은 메모리 공간 을 가리 키 며,prop 이 대상 이나 배열 이 라면 하위 구성 요소 내부 에서 변경 하면 부모 구성 요소 의 상태 에 영향 을 줄 수 있 습 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Vue 구성 요소 옵션 props 인 스 턴 스 상세 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!