웹 프론트엔드 JS 튜토리얼 소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명

소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명

May 02, 2018 am 09:15 AM
props 단계 상해

이번에는 Prop을 통해 데이터를 전송하는 단계에 대해 자세히 설명하겠습니다. Prop이 데이터를 전송할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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

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

구성 요소에서 props 옵션을 사용하여 부모로부터 받아야 하는 데이터를 선언합니다. props의 값은 두 가지 유형이 될 수 있습니다. 하나는

string

배열이고 다른 하나는 객체입니다.

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의 데이터는 상위 항목에서 온다는 것입니다. 데이터는 구성 요소 자체의 데이터이고 범위는 구성 요소 자체이며 두 데이터 모두 템플릿 템플릿과 계산된 속성 및

method

s에서 사용할 수 있습니다. 위 예제의 데이터 메시지는 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中文网其它相关文章!

推荐阅读:

webpack自动刷新使用详解

Angular入口组件与声明式组件使用详解

위 내용은 소품을 통해 데이터를 전달하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

iPhone에서 Google 지도를 기본 지도로 설정하는 방법 iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Apr 17, 2024 pm 07:34 PM

iPhone의 기본 지도는 Apple의 독점 위치 정보 제공업체인 지도입니다. 지도가 점점 좋아지고 있지만 미국 이외의 지역에서는 잘 작동하지 않습니다. Google 지도와 비교하면 아무것도 제공할 수 없습니다. 이 기사에서는 Google 지도를 사용하여 iPhone의 기본 지도로 만드는 실행 가능한 단계에 대해 설명합니다. iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Google 지도를 휴대전화의 기본 지도 앱으로 설정하는 것은 생각보다 쉽습니다. 아래 단계를 따르십시오. – 전제 조건 단계 – 휴대폰에 Gmail이 설치되어 있어야 합니다. 1단계 – AppStore를 엽니다. 2단계 – “Gmail”을 검색하세요. 3단계 - Gmail 앱 옆을 클릭하세요.

이 Apple ID는 iTunes Store에서 아직 사용되지 않습니다. 수정 이 Apple ID는 iTunes Store에서 아직 사용되지 않습니다. 수정 Jun 10, 2024 pm 05:42 PM

AppleID를 사용하여 iTunesStore에 로그인하면 "이 AppleID는 iTunesStore에서 사용되지 않았습니다"라는 오류가 화면에 표시될 수 있습니다. 걱정할 오류 메시지는 없습니다. 다음 솔루션 세트에 따라 문제를 해결할 수 있습니다. 수정 1 – 배송 주소 변경 iTunes Store에 이 메시지가 나타나는 주된 이유는 AppleID 프로필에 올바른 주소가 없기 때문입니다. 1단계 – 먼저 iPhone에서 iPhone 설정을 엽니다. 2단계 – AppleID는 다른 모든 설정보다 우선해야 합니다. 그러니 열어보세요. 3단계 – 거기에서 “결제 및 배송” 옵션을 엽니다. 4단계 – Face ID를 사용하여 액세스 권한을 확인하세요. 단계

최신 버전의 WeChat으로 업그레이드하는 단계(최신 버전의 WeChat으로 업그레이드하는 방법을 쉽게 익히세요) 최신 버전의 WeChat으로 업그레이드하는 단계(최신 버전의 WeChat으로 업그레이드하는 방법을 쉽게 익히세요) Jun 01, 2024 pm 10:24 PM

WeChat은 더 나은 사용자 경험을 제공하기 위해 지속적으로 새 버전을 출시하는 중국의 소셜 미디어 플랫폼 중 하나입니다. WeChat을 최신 버전으로 업그레이드하는 것은 가족 및 동료와 연락을 유지하고 친구와 연락을 유지하며 최신 개발 상황을 파악하는 데 매우 중요합니다. 1. 최신 버전의 기능과 개선 사항을 이해합니다. WeChat을 업그레이드하기 전에 최신 버전의 기능과 개선 사항을 이해하는 것이 매우 중요합니다. 성능 개선 및 버그 수정에 대해서는 WeChat 공식 웹사이트나 앱 스토어에서 업데이트 노트를 확인하여 새 버전에서 제공되는 다양한 새로운 기능에 대해 알아볼 수 있습니다. 2. 현재 WeChat 버전 확인 WeChat을 업그레이드하기 전에 현재 휴대폰에 설치된 WeChat 버전을 확인해야 합니다. WeChat 애플리케이션 "나"를 클릭하여 연 다음 "정보" 메뉴를 선택하면 현재 WeChat 버전 번호를 볼 수 있습니다. 3. 앱을 엽니다

Win11 시스템 관리자 권한을 얻는 단계에 대한 자세한 설명 Win11 시스템 관리자 권한을 얻는 단계에 대한 자세한 설명 Mar 08, 2024 pm 09:09 PM

Windows 11은 Microsoft가 출시한 최신 운영체제로 사용자들에게 큰 사랑을 받고 있습니다. Windows 11을 사용하는 과정에서 권한이 필요한 일부 작업을 수행하기 위해 시스템 관리자 권한을 얻어야 하는 경우가 있습니다. 다음으로 Windows 11에서 시스템 관리자 권한을 얻는 단계를 자세히 소개하겠습니다. 첫 번째 단계는 "시작 메뉴"를 클릭하는 것입니다. 왼쪽 하단에 있는 Windows 아이콘을 클릭하여 "시작 메뉴"를 엽니다. 두 번째 단계에서 '를 찾아서 클릭하세요.

iPhone의 Safari 확대/축소 문제: 해결 방법은 다음과 같습니다. iPhone의 Safari 확대/축소 문제: 해결 방법은 다음과 같습니다. Apr 20, 2024 am 08:08 AM

Safari에서 확대/축소 수준을 제어할 수 없으면 작업을 완료하는 것이 까다로울 수 있습니다. 따라서 Safari가 축소된 것처럼 보이면 문제가 될 수 있습니다. Safari에서 이 사소한 확대/축소 문제를 해결할 수 있는 몇 가지 방법은 다음과 같습니다. 1. 커서 확대: Safari 메뉴 표시줄에서 "디스플레이" > "커서 확대"를 선택합니다. 이렇게 하면 화면에 커서가 더 잘 보이도록 되어 제어가 더 쉬워집니다. 2. 마우스 이동: 간단해 보이지만 때로는 화면의 다른 위치로 마우스를 이동하기만 해도 자동으로 원래 크기로 돌아갈 수 있습니다. 3. 키보드 단축키 사용 수정 1 – 확대/축소 수준 재설정 Safari 브라우저에서 직접 확대/축소 수준을 제어할 수 있습니다. 1단계 – Safari에 있을 때

iPhone에서 Shazam 앱이 작동하지 않음: 수정 iPhone에서 Shazam 앱이 작동하지 않음: 수정 Jun 08, 2024 pm 12:36 PM

iPhone의 Shazam 앱에 문제가 있나요? Shazam은 노래를 듣고 노래를 찾는 데 도움을 줍니다. 하지만 Shazam이 제대로 작동하지 않거나 노래를 인식하지 못하는 경우 수동으로 문제를 해결해야 합니다. Shazam 앱을 복구하는 데 시간이 오래 걸리지 않습니다. 따라서 더 이상 시간을 낭비하지 않고 아래 단계에 따라 Shazam 앱 문제를 해결하세요. 수정 1 – 굵은 텍스트 기능 비활성화 iPhone의 굵은 텍스트로 인해 Shazam이 제대로 작동하지 않을 수 있습니다. 1단계 – iPhone 설정에서만 이 작업을 수행할 수 있습니다. 그러니 열어보세요. 2단계 – 다음으로 "디스플레이 및 밝기" 설정을 엽니다. 3단계 - "굵은 텍스트"가 활성화된 경우

iPhone 스크린샷이 작동하지 않음: 해결 방법 iPhone 스크린샷이 작동하지 않음: 해결 방법 May 03, 2024 pm 09:16 PM

iPhone에서 스크린샷 기능이 작동하지 않나요? 스크린샷을 찍는 것은 매우 쉽습니다. 볼륨 높이기 버튼과 전원 버튼을 동시에 누르고 휴대폰 화면을 잡기만 하면 됩니다. 그러나 장치에서 프레임을 캡처하는 다른 방법이 있습니다. 수정 1 – 보조 터치 사용 보조 터치 기능을 사용하여 스크린샷을 찍습니다. 1단계 – 휴대폰 설정으로 이동합니다. 2단계 – 다음으로 탭하여 접근성 설정을 엽니다. 3단계 – 터치 설정을 엽니다. 4단계 – 다음으로 보조 터치 설정을 엽니다. 5단계 – 휴대폰에서 Assistive Touch를 켜세요. 6단계 – “상위 메뉴 사용자화”를 열어서 접근하세요. 7단계 – 이제 이러한 기능 중 하나를 화면 캡처에 연결하기만 하면 됩니다. 그러니 첫 번째를 클릭하세요.

iPhone에 시계 앱이 없습니다. 해결 방법 iPhone에 시계 앱이 없습니다. 해결 방법 May 03, 2024 pm 09:19 PM

휴대폰에 시계 앱이 없나요? 날짜와 시간은 iPhone의 상태 표시줄에 계속 표시됩니다. 그러나 시계 앱이 없으면 세계 시계, 스톱워치, 알람 시계 및 기타 여러 기능을 사용할 수 없습니다. 따라서 누락된 시계 앱을 수정하는 것이 해야 할 일 목록의 맨 위에 있어야 합니다. 이러한 솔루션은 이 문제를 해결하는 데 도움이 될 수 있습니다. 수정 1 - 시계 앱 배치 실수로 홈 화면에서 시계 앱을 제거한 경우 시계 앱을 다시 제자리에 배치할 수 있습니다. 1단계 – iPhone을 잠금 해제하고 앱 라이브러리 페이지에 도달할 때까지 왼쪽으로 스와이프합니다. 2단계 – 다음으로 검색창에 “시계”를 검색하세요. 3단계 – 검색 결과 아래에 “시계”가 표시되면 길게 누르고

See all articles