vue 2.0 하위 구성 요소 가 props 값 을 바 꾸 고 부모 구성 요소 에 값 을 전달 하 는 방법

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

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}
계산 속성 을 정의 하고 prop 의 값 을 처리 하 며 되 돌려 줍 니 다.

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}
자바 스 크 립 트 에서 대상 과 배열 은 참조 형식 이 며,같은 메모리 공간 을 가리 키 고 있 습 니 다.만약 prop 이 라면.
대상 이나 배열 입 니 다.하위 구성 요소 내부 에서 바 꾸 면 부모 구성 요소 의 상태 에 영향 을 줄 수 있 습 니 다.
부모 구성 요 소 는 props 를 사용 하여 하위 구성 요소 에 데 이 터 를 전달 하 는 것 을 알 고 있 습 니 다.그러나 하위 구성 요 소 는 어떻게 부모 구성 요소 와 통신 합 니까?이 럴 때 Vue 의 사용자 정의 이벤트 시스템 이 도움 이 됩 니 다https://cn.vuejs.org/v2/guide/components.html#사용자 정의 이벤트
부모 구성 요소 에서 두 변 수 를 정의 합 니 다.하위 구성 요소 에 동적 으로 연결 합 니 다.


하위 구성 요소:



부모 구성 요소:두 가지 방법 을 정의 하고 하위 구성 요소 사용자 정의 이벤트 에 연결 합 니 다.


이 vue 2.0 하위 구성 요소 가 props 값 을 바 꾸 고 부모 구성 요소 에 값 을 전달 하 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기