이 기사는 공식 문서에서 나옵니다.
http://cn.vuejs.org/guide/components.html#props
이 튜토리얼은 편집자가 공식 문서와 함께 편집 한보다 상세하고 포괄적 인 튜토리얼로 초보자가 읽는 데 특히 적합합니다.
소품 데이터 전달
component 인스턴스의 스코프 :
동일한 이름의 속성이 있더라도 분리되어 간단히 말해서 구성 요소간에 값이 공유되지 않습니다.
<div id = "app"> <add> </add> <lel> </del> </div> <cript> var vm = new vue ({el : '#app', 구성 요소 : { "add": {템플릿 : "<버튼> btn : {btn}} </button>", data : {btn}}}} {el : "123"}} {{btn}} </button> " {템플릿 : "<button> btn : {{btn}} </button>", data : function () {return {btn : "456"}}}; </스크립트>렌더링 결과는 다음과 같습니다.
2 개의 버튼, 첫 번째 버튼은 값이 123이고 두 번째 버튼은 값이 456입니다 (둘 다 BTN이지만)
props를 사용하여 정적 데이터를 바인딩합니다.
[1]이 방법은 문자열을 통과하는 데 사용되며 값은 상위 구성 요소의 사용자 정의 요소에 기록됩니다.
짐
【3 will 템플릿의 데이터 속성에서 동일한 이름의 값을 덮어 씁니다.
샘플 코드 :
<div id = "app"> <add btn = "h"> </add> </div> <cript> var vm = new vue ({el : '#app', data : {h : "hello"}, 구성 요소 : { "add": {props : [ 'btn'], 템플릿 : "<button> btn : {btn}}} {btn : "123"}; </스크립트>이 글쓰기 방법에 따라 BTN의 값은 123이 아닌 H입니다.
【4 el 낙타 쓰기 방법
보간이 낙타 인 경우
HTML 태그에서, HTML의 특성은 대소 문자에 민감하지 않기 때문에 (예 : Li 및 Li와 같은) HTML 태그에서 전달되는 값은 BTN-TEST와 같은 짧은 수평선으로 작성되어야합니다.
소품 배열에서는 보간과 일치해야하며 낙타 (예 : Btntest)로 작성해야합니다.
예를 들어:
소품 : [ 'btntest'], 템플릿 : "<button> btn : {{btntest}} </button>",올바른 글쓰기 :
<btn-test add = "h"> </add>
보간이 짧은 수평선 유형으로 작성되거나 HTML 태그가 낙타 스타일로 작성된 경우 정상적으로 적용되지 않습니다. (보간이 케이스 한도를 낙타하는 것으로 쓰여지지 않는 한)
props를 사용한 동적 데이터를 바탕으로 :
간단히 말해서, 부모 구성 요소의 데이터와 일치하는 어린이 구성 요소의 특정 보간을하는 것입니다.
작성하는 표준 방법은 (V- 바인드 사용)입니다.
<v-bind 추가 : 자식 구성 요소의 값 = "부모 구성 요소의 속성"> </add>
코드로
<div id = "app"> <ad v-bind : btn = "h"> </add> </div> <cript> var vm = new vue ({el : '#app', data : {h : "hello"}, 구성 요소 : { "add": {props : [ 'btn'], 템플릿> btn : {btn}}}}}}}}} () {return { 'btn': "123"}; </스크립트>설명 :
btn에서 사용하는 모성 구성 요소 데이터에서 H의 값;
【2 return 어린이 구성 요소의 데이터 기능의 반환 값이 덮어 씁니다.
다시 말해, 상위 구성 요소 (속성 이름을 기준으로)의 값이 사용되며 레이블의 값은 문자열로 사용됩니다.
【4 still 소품을 사용해야합니다. 그렇지 않으면 데이터에서 BTN의 값을 사용합니다.
literal 및 동적 구문 :
[1] 간단히 말하면, v-bind를 추가하지 않으면 문자 수량, 즉 문자열로 취급됩니다 (예 : 1은 숫자 유형이 아닌 문자열이기도합니다).
【2 v v-bind를 추가하면 JS 표현식이 전달됩니다 (따라서 부모 구성 요소의 값이 전달 될 수 있음);
v-bind를 추가 한 후, 부모 구성 요소의 값을 찾을 수 있다면 부모 구성 요소의 값이 사용됩니다. 상응하는 것이없는 경우, JS 표현으로 간주됩니다 (예 : 1+2는 3으로 간주됩니다. {A : 1}은 물체로 간주됩니다).
코드로 :
<div id = "app"> <ad v-bind : btn = "1+2"> </add> </div> <cript> var vm = new vue ({el : '#app', data : {h : "hello"}, 구성 요소 : { "add": {props : [ 'btn'], 템플릿> btn : {btn}}. }}); </스크립트>여기서 BTN의 값은 3입니다 (v-bind를 추가하지 않고 1+2가 아닌 스트링이 아닌)
props 바인딩 유형 :
[1] 간단히 말해서, 그것은 두 가지 유형으로 나뉘어져 있습니다. 즉 일원 바인딩 (부모 구성 요소는 자식 구성 요소에 영향을 줄 수 있지만 반대는 불가능합니다) 및 양방향 바인딩 (자식 구성 요소도 부모 구성 요소에 영향을 줄 수 있음);
【2-일원 바인딩 예 : (기본값 또는 사용 .Once)
<div id = "app"> 상위 구성 요소 : <입력 v- 모드 = "val"> <br/> 아동 구성 요소 : <test v-bind : val "> </test> </div> <cript> var vm = new vue ({el : '#app', data : {val : 1}, components : {testval :", testval : v-model = 'testVal'/> "}}); </스크립트>설명 :
부모 구성 요소의 값이 변경되면 자식 구성 요소의 값도 변경됩니다.
자식 구성 요소의 값이 변경되면 부모 구성 요소의 값이 변경되지 않습니다. 상위 구성 요소의 값이 다시 수정되면 하위 구성 요소가 다시 동기화됩니다.
또한 하위 구성 요소가 동시에 결합되기를 원한다면 자식 구성 요소의 입력은 값 속성이 아닌 V- 모델이어야합니다 (이는 단일 항목 바인딩 일 수 있으며 바인딩은 아동 구성 요소의 값을 수정 한 후 손실됩니다).
【3-양방향 바인딩 :
".sync"는 수정 자로 필요합니다
예를 들어 :
<div id = "app"> 상위 구성 요소 : <입력 v- 모드 = "val"> <br/> 아동 구성 요소 : <test : test : test.sync = "val"> </test> </div> <cript> var vm = new vue ({el : '#app', 데이터 : {val : 1}, 구성 요소 : {test : {props : em props : in props : in props : " v-model = 'test'/> "}}); </스크립트>그 효과는 어떤 가치를 변경하든 다른 값이 그에 따라 변경 될 것입니다.
【4 s 소품 검증 :
간단히 말해서, 구성 요소가 데이터를 얻을 때 검증에 사용되며 조건이 충족되는 경우에만 사용됩니다.
쓰기 방법은 소품을 객체로 바꾸는 것입니다. 검증되는 값은 객체의 키이며 검증 조건은 키에 해당하는 값입니다.
예를 들어:
소품 : {test : {twoway : true}},테스트 변수가 양방향 바운드이며 그렇지 않은 경우 오류 가보고됩니다. (이것은 일원 바인딩을 검증하는 데 사용할 수 없습니다).
샘플 코드는 다음과 같습니다.
<div id = "app"> 상위 구성 요소 : <input v-model = "val"> <br/> 아동 구성 요소 : <test : test = "val"> </div> <cript> var vm = new vue ({el : '#app', data : {val : 1}, components : {test : {propl : " v-model = 'test'/> "}}); </스크립트>더 많은 확인 유형은 공식 자습서를 참조하십시오.
http://cn.vuejs.org/guide/components.html#prop_u9a8c_u8bc1
위의 것은 편집자가 소개 한 vuejs의 아홉 번째 기사의 구성 요소 범위 및 소품 데이터 전송 예에 대한 자세한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!