집 > 기사 > 웹 프론트엔드 > vue+props를 사용하여 프로젝트에 데이터를 전달하는 방법

vue+props를 사용하여 프로젝트에 데이터를 전달하는 방법

php中世界最好的语言원래의: 2018-06-09 11:44:184162검색

이번에는 프로젝트에서 vue+props를 사용하여 데이터를 전송하는 방법을 보여드리고, vue+props를 사용하여 데이터를 전송할 때 주의사항은 무엇인지 살펴보겠습니다.

Vue에서 부모와 자식 구성 요소 간의 관계는 소품이 아래로 전달되고 이벤트가 위로 전달되는 것으로 요약할 수 있습니다. 부모 컴포넌트는 props를 통해 자식 컴포넌트에 데이터를 보내고, 자식 컴포넌트는 이벤트를 통해 부모 컴포넌트에 메시지를 보냅니다. 작동 방식을 확인하세요.

1. 기본 사용법

구성 요소는 템플릿의 콘텐츠를 재사용해야 할 뿐만 아니라 더 중요한 것은 구성 요소 간 통신이 필요하다는 것입니다.

컴포넌트에서 props 옵션을 사용하여 부모로부터 받아야 하는 데이터를 선언합니다. props의 값은 두 가지 유형이 될 수 있습니다. 하나는 문자열 배열이고 다른 하나는 객체입니다.

1.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의 데이터는 상위 항목에서 온다는 것입니다. 데이터는 구성 요소 자체입니다. 데이터 범위는 구성 요소 자체입니다. 두 데이터 모두 템플릿, 계산된 속성 및 메서드에서 사용할 수 있습니다.

위 예제의 데이터 메시지는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!