이번에는 Prop을 통해 데이터를 전송하는 단계에 대해 자세히 설명하겠습니다. Prop이 데이터를 전송할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
Vue에서 부모와 자식 구성 요소 간의 관계는 소품이 아래로 전달되고 이벤트가 위로 전달되는 것으로 요약할 수 있습니다. 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 보내고, 자식 컴포넌트는 이벤트를 통해 부모 컴포넌트에 메시지를 보냅니다. 작동 방식을 확인하세요.
1. 기본 사용법구성 요소는 템플릿의 콘텐츠를 재사용해야 할 뿐만 아니라 더 중요한 것은 구성 요소 간 통신이 필요하다는 것입니다.
구성 요소에서 props 옵션을 사용하여 부모로부터 받아야 하는 데이터를 선언합니다. props의 값은 두 가지 유형이 될 수 있습니다. 하나는
string1.1 문자열 배열: <p id="app4">
<my-component4 message="数据来自父组件"></my-component4>
</p>
Vue.component('my-component4',{
props: ['message'],
template: '<p>{{message}}</p>'
});
var app4 = new Vue({
el: '#app4'
});
렌더링된 결과는 다음과 같습니다.
<p id= ” app4”> <p >来自父组件的数据</ p> </p>
props에 선언된 데이터와 구성 요소 데이터 함수에 의해 반환된 데이터의 주요 차이점은 props가 상위 항목에서 온 반면, props의 데이터는 상위 항목에서 온다는 것입니다. 데이터는 구성 요소 자체의 데이터이고 범위는 구성 요소 자체이며 두 데이터 모두 템플릿 템플릿과 계산된 속성 및
methods에서 사용할 수 있습니다. 위 예제의 데이터 메시지는 props를 통해 부모로부터 전달됩니다. 여러 데이터를 전달하려면 props 배열에 항목을 추가하기만 하면 됩니다.
때로는 전달되는 데이터가 직접 하드코딩되지 않고 상위 컴포넌트의 동적 데이터인 경우 이 경우 상위 컴포넌트의 데이터가 변경되면 v -bind 명령을 사용하여 동적으로 바인딩할 수 있습니다. 또한 하위 구성 요소에도 전달됩니다.
<p id="app5"> <input type="text" v-model="text"> <my-component5 :my-text="text"></my-component5> </p> Vue.component('my-component5',{ props: ['myText'], template: '<p>{{myText}}</p>' }); var app5 = new Vue({ el: '#app5', data: { text: '动态传递父组件数据' } });
몇 가지 참고 사항:
1. 숫자, 부울 값, 배열, 객체를 직접 전달하고 v-bind를 사용하지 않는 경우 문자열만 전달됩니다.
2. 객체의 모든 속성을 props로 전달하려면 매개변수 없이 v-bind를 사용하면 됩니다(즉, v-bind:prop-name 대신 v-bind를 사용하세요). 예를 들어 알려진 todo 객체:
1.2 객체:
prop를 확인해야 할 경우 객체 작성이 필요합니다.
일반적으로 다른 사람이 사용할 수 있도록 구성 요소를 제공해야 하는 경우 데이터 검증을 수행하는 것이 좋습니다. 예를 들어 특정 데이터는 숫자 형식이어야 합니다. 콘솔.
<p id="app6"> <input type="text" v-model="number"> <my-component6 :my-text="number"></my-component6> </p> Vue.component('my-component6',{ props: { 'myText':{ type: Number, //必须是数字类型的 required: true, //必须传值 default: 1 //如果未定义,默认值就是1 } }, template: '<p>{{myText}}</p>' }); var app6 = new Vue({ el: '#app6', data: { number: 1 } });
확인된 유형은 다음과 같습니다.
• 문자열
• 숫자• 부울
• 객체
• 배열
• 함수
유형은 감지 인스턴스를 사용하여 사용자 정의 생성자가 될 수도 있습니다.
prop 확인에 실패하면 개발 버전의 콘솔에 경고가 표시됩니다.
2. 단방향 데이터 흐름 Vue 2.x와 Vue l.x의 더 큰 변화는 Vue2.x가 props를 통해 한 방향으로 데이터를 전송한다는 것, 즉 상위 컴포넌트 데이터가 변경되면 하위 구성 요소로 전송되지만 그 반대는 아닙니다.
비즈니스에서는 prop을 변경해야 하는 두 가지 상황이 자주 발생합니다.
2.1: 하나는 상위 구성 요소가 초기 값을 전달하고 하위 구성 요소는 이를 사용 및 수정할 수 있는 초기 값으로 저장하는 것입니다. 자체 범위 내에서 마음대로. (Prop이 초기값으로 전달된 후 하위 컴포넌트는 이를 로컬 데이터로 사용하려고 합니다.)
이 경우 컴포넌트 데이터에 다른 데이터를 선언하고 상위 컴포넌트의 prop을 참조할 수 있습니다. 코드는 다음과 같습니다.
<p id="app7"> <my-component7 :init-count="1"></my-component7> </p> Vue.component('my-component7',{ props: ['initCount'], template: '<p>{{count}}</p>', data: function(){ return { count: this.initCount } } }); var app7 = new Vue({ el: '#app7' });
데이터 개수는 구성 요소가 초기화될 때 상위 구성 요소에서 가져옵니다. 이후에는 개수와 관련이 없으므로 개수만 유지합니다. initCount를 직접 조작하는 것을 피할 수 있습니다.
2.2 prop는 변환해야 하는 원래 값으로 전달됩니다. (Prop은 원시 데이터로 전달되며 하위 구성 요소에 의해 다른 데이터 출력으로 처리됩니다.)
이 경우 계산된 속성을 사용할 수 있습니다.
<p id="app8"> <my-component8 :width="100"></my-component8> </p> Vue.component('my-component8',{ props: ['width'], template: '<p :style="style">组件内容</p>', computed: { style: function(){ return { width: this.width+'px' } } } }); var app8 = new Vue({ el: '#app8' });
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
위 내용은 소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!