Vue 구성 요소 통신$attrs,$listeners 실현 원리 분석

머리말
vue 통신 수단 은 props/emit,vuex,이벤트 bus,provide/inject 등 여러 가지 가 있 습 니 다.또 하나의 통신 방식 이 있 습 니 다.그것 은 바로$attrs 와$listeners 입 니 다.전에 이 두 api 를 들 었 습 니 다.시간 이 있 을 때 보충 하 는 것 입 니 다.이런 방식 은 매우 우아 해서 사용 해도 괜찮다.다음 예 는 모두 아버지,아들,손자,세 사람의 관 계 를 통 해 사용 방식 을 설명 한다.

$attrs

공식 설명:
부모 역할 영역 에서 prop 로 인식 되 지 않 고 가 져 오 는 특성 바 인 딩(class 와 style 제외)을 포함 합 니 다.하나의 구성 요소 가 prop 에 대해 설명 하지 않 았 을 때 모든 부모 역할 필드 의 바 인 딩(class 와 style 제외)을 포함 하고 v-ind="$attrs"를 통 해 내부 구성 요소 로 들 어 갈 수 있 습 니 다―높 은 등급 의 구성 요 소 를 만 들 때 유용 합 니 다.
나의 이해:
props 성명 을 제외 한 모든 귀속 속성 수신(class,style 제외)
도해:

child.vue 가 props 에서 name 속성 을 밝 혔 기 때문에$attrs 에는 age,gender 두 개의 속성 만 있 고 출력 결 과 는 다음 과 같 습 니 다.
{age: "20",gender: "man"}

또한 grandson.vue 에서 v-bind="$attrs"를 통 해 속성 을 계속 아래로 전달 할 수 있 으 며,grandson.vue 도 부모 구성 요소 의 속성 에 접근 할 수 있 습 니 다.이것 은 여러 속성 을 전달 할 때 매우 편리 하고,한 항목 씩 연결 하지 않 아 도 됩 니 다.
다른 속성 을 추가 하려 면 속성 을 계속 귀속 할 수 있 습 니 다.단,계속 연결 하 는 속성 과$attrs 의 속성 이 중복 되 었 을 때 계속 연결 하 는 속성 우선 순위 가 높 습 니 다.
$listeners

공식 설명:
부모 역할 영역 에 있 는(native 수식 기 를 포함 하지 않 는)v-on 이벤트 모니터 를 포함 합 니 다.이것 은 v-on="$listeners"를 통 해 내부 구성 요소 인 더 높 은 차원 의 구성 요 소 를 만 들 때 매우 유용 합 니 다.
나의 이해:
네 이 티 브 이벤트 수정자 가 있 는 모든 이벤트 모니터 를 수신 합 니 다.
도해:

parent.vue 에서 child.vue 에 두 개의 이벤트 가 연결 되 어 있 습 니 다.native click 이벤트 와 사용자 정의 이벤트 가 있 기 때문에 child.vue 에서$listeners 를 출력 한 결 과 는 다음 과 같 습 니 다.
{ customEvent: fn }

attrs 속성 과 마찬가지 로 v-on="$listeners"를 통 해 이벤트 감청 기 를 계속 아래로 전달 하여 grandson.vue 가 이벤트 에 접근 하도록 할 수 있 으 며$emit 를 사용 하여 parent.vue 의 함 수 를 촉발 할 수 있 습 니 다.
다른 이벤트 모니터 를 추가 하려 면 이 벤트 를 계속 연결 할 수 있 습 니 다.그러나 주의해 야 할 것 은 계속 연 결 된 이벤트 와$listeners 의 이벤트 가 중복 되 었 을 때 덮어 쓰 지 않 습 니 다.grandson.vue 가 customeEvent 를 촉발 할 때 child.vue 와 parent.vue 의 이벤트 가 모두 촉발 되 고 촉발 순 서 는 거품 과 유사 하 며 child.vue 부터 parent.vue 까지 입 니 다.
사용 필드:
구성 요소 의 값 을 전달 할 때 사용 합 니 다.할 아버 지 는 아버지 구성 요소 에 값 을 전달 합 니 다.아버지 구성 요 소 는$attrs 를 통 해 아버지 props 에 없 는 모든 속성 을 가 져 옵 니 다.아버지 구성 요 소 는 손자 구성 요소 에$attrs 와$listeners 를 연결 하여 손 구성 요 소 를 할아버지 가 전달 하 는 값 을 가 져 오고 할아버지 에 게 정의 하 는 방법 을 호출 할 수 있 습 니 다.
일부 UI 라 이브 러 리 에 대해 2 차 패 키 징 을 할 때 사용 합 니 다.예 를 들 어 element-ui 는 구성 요소 가 자신의 사용 장면 을 만족 시 키 지 못 할 때 2 차 패 키 징 을 하지만 자신의 속성 과 방법 을 유지 하려 고 합 니 다.그러면 이때$attrs 와$listens 는 완벽 한 해결 방안 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.