vue 컴포넌트에서 매개 변수 전달 문제 (글로벌 등록, 로컬 등록)

첫째, 부모-자식 구성 요소의 정의

부모-자식 구성 요소에는 일반 부모-자식 구성 요소와 특수 부모-자식 구성 요소라고하는 두 가지 정의가 있습니다.
　　1.1, 기존의 부모-자식 구성 요소

가져 오기로 다른 구성 요소를 가져오고 사용자 정의 태그를 사용하여 수신합니다. 현재 구성 요소의 구성 요소에 태그를 등록합니다. 페이지에서 직접 <custom tag> </ custom tag>로 사용할 수 있습니다. 현재 구성 요소는 상위 구성 요소이고 가져온 구성 요소는 하위 구성 요소입니다.
하위 구성 요소를 소개합니다.　

하위 구성 요소 등록 :

하위 구성 요소 사용 :

1.2 특수 상위-하위 컴포넌트 컴포넌트
　　는 라우팅에서 정의됩니다. 컴포넌트는 하위를 포함합니다. 또한 페이지의 양식을 사용하여 상위-하위 컴포넌트로 간주됩니다. 현재 컴포넌트는 상위 컴포넌트 및 라우터보기 라우팅입니다. 하위 구성 요소입니다. 　main.vue에 도입 됨 :

현재 main.vue는 상위 컴포넌트이고 router-view에 의해 도입 된 container.vue는 하위 컴포넌트입니다.

둘째, 부모 구성 요소의 데이터 및 메서드 함수가 자식 구성 요소에 전달됩니다.

. 2.1 종래의 부모 구성 요소는 자식 구성 요소의 매개 변수 전달
　　데이터 및 방법
패스 데이터 및 main.vue 부모 컴포넌트의 방법 : main.vue 상위 컴퍼넌트를
　header.vue 자식 요소 방법에 지나치게 데이터 및 데이터를 전달하기 위해 부모 요소 도입 : 　사용을 header.vue 하위 구성 요소에서 부모 구성 요소가 전달한 데이터 및 메서드 :

2.1. 특수 부모 구성 요소를 자식 구성 요소에 전달합니다.

main.vue의 부모 컴포넌트는 기본적으로 위와 동일하지만 차이점은 부모 컴포넌트의 메소드 함수를 전달할 때 ":"대신 "v-on :"또는 "@"를 사용한다는 점입니다
. container.vue 하위 구성 요소에서도 동일합니다. 차이점은 부모가 허용된다는 점입니다. 구성 요소가 전달한 메서드 함수는 props를 사용하지 않습니다. 메서드에서 새 메서드를 정의하여 this. $ emit ( 'testRouter', 'val ') 메서드 본문에이 형식으로 부모 구성 요소의 메서드를 가져옵니다. 자식 구성 요소의 새로 정의 된 메서드에 값을 할당합니다. alert1은 바인딩시 부모 구성 요소에서 정의한 이름입니다. 메서드가 매개 변수를 사용하는 경우 val에 빈 문자열을 추가합니다.

셋째, 자식 구성 요소는 데이터 및 메서드 함수를 부모 구성 요소에 전달합니다.

3.1. 기존의 자식 구성 요소는 부모 구성 요소에 데이터와 메서드를 전달합니다.

(1) 데이터 전달 : 하위 구성 요소는 주로 이벤트를 통해 상위 구성 요소에 데이터를 전달합니다.

하위 컴포넌트는 this. $ emit ( 'transferNum', this.num)을 통해 데이터 num을 전송하는 메소드를 정의하고 상위 컴포넌트는 transferNum 이벤트를 수신합니다. 이벤트가 트리거되면 함수가 실행되고 값이 할당됩니다.

하위 컴포넌트 의 데이터 및 데이터 전송 방법 : 상위 컴포넌트의 하위 컴포넌트에서 전송 기능을 모니터링하고 값을 할당하는 방법.

이러한 방식으로 데이터의 num 데이터를 상위 구성 요소에서 사용할 수 있습니다.
(2) 전달 방법 : 하위 컴포넌트는 잘 정의 된 메소드를 가지고 있으며, 상위 컴포넌트는 하위 컴포넌트를 참조 할 때 사용자 정의 태그에 식별자를 추가합니다. ref =”child1”은 하위 컴포넌트를 나타냅니다. 부모 컴포넌트는 메서드에 자체 메서드 이름을 정의합니다. 메서드 본문 : $R\; \&\; LTEFS.CHILD.\; 1.FUN-.이탈리아어생각은이다를\; 통해과잉조정과$ 상위 구성 요소에 할당 된 방법 심판의 이름에 재미 자식 1이라는 서브 어셈블리.

하위 컴포넌트 정의 방법 :
상위 컴포넌트에서 하위 컴포넌트를 참조 할 때 식별자 rel = 'abc'를 추가합니다. rel은 문법이고 abc는
상위 컴포넌트에 정의 된 메소드입니다. 주요 내용은 figure이고 메서드는 aaa로 표시됩니다. 자식 구성 요소의 setFun 메서드입니다. gerFun 메서드 3.2를 호출
　하면 특수 하위 구성 요소가 데이터와 메서드를 부모 구성 요소에 전달합니다.

테스트 후 특수 하위 구성 요소가 부모 구성 요소로 데이터 및 메서드를 전송하는 것은 일반 하위 구성 요소가 부모 구성 요소로 전달하는 데이터 및 메서드와 동일합니다.

네, 형제 구성 요소가 가치를 전달

4.1 형제 구성 요소 소개

하위 구성 요소 인 두 구성 요소는 동일한 상위 구성 요소
4.2, main.js의 설정에서 참조됩니다.

4.3. 두 형제 구성 요소 사이의 구문
구성 요소 Header.vue 는 데이터를 보내는 방법을 정의해야합니다. 여기서 sendMsg는 여기에 정의 된 방법이고,이 함수는 페이지를 클릭 할 때 트리거되며, 함수 본문은 버스를 통해 $ emit을 사용합니다. 중앙 이벤트 버스 전송 이벤트를 전송하고 이벤트의 기능은 "hello world!"데이터를 전송하고 sendMsg와 전송을 구별하는 것입니다. 전자는 현재 페이지의 클릭 이벤트이고 후자는 전송 된 이벤트이며 필요합니다. 다른 구성 요소에 의해 모니터링됩니다.

컴포넌트 Copy.vue에서 라이프 사이클이 생성되면 $ on을 사용하여 버스 중앙 이벤트 버스를 통해 컴포넌트 1에서 전송 된 전송 이벤트를 모니터링하고 매개 변수가있는 콜백 함수를 사용하여 전달 된 값을 수신하면 매개 변수는 다음과 같습니다. 전달 된 Value, 현재 구성 요소의 변수에 값을 할당합니다.

　Brother 구성 요소는 서로의 메서드를 호출하지 않으며 여러 번 사용되는 경우 개별 js 형식 파일의 메서드로 개별적으로 패키징 된 다음 직접 호출됩니다.