이 기사는 편집자가 공식 문서와 함께 편집 한보다 상세하고 포괄적 인 튜토리얼입니다. 매우 좋고 초보자가 읽는 데 더 적합합니다.
이 기사는 공식 문서에서 나옵니다.
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
부모-자식 구성 요소 커뮤니케이션
hild 아동 구성 요소, 부모 구성 요소 및 루트 구성 요소에 액세스;
이. $ 부모 액세스 부모 구성 요소
이. $ 어린이는 아동 구성 요소에 액세스합니다 (배열입니다)
this. $ root 루트 인스턴스의 자손이 루트 인스턴스에 액세스합니다.
샘플 코드 :
<div id = "app"> 부모 구성 요소 : <input v-model = "val"> <br/> 아동 구성 요소 : <test : the test = "val"> </div> <cript> var vm = new vue ({el : '#app', 데이터 : {val : 1}, components : {test : [propl : '] v-model = 'test'/> ", methods : {findparent : function () {console.log (this. $ parent); // 루트 구성 요소 console.log (this. $ parent.val)에 액세스하십시오. // 루트 구성 요소의 val 속성 콘솔에 액세스하십시오. // 상위 구성 요소와 루트 구성 요소가 일치인지 확인합니다 (부모 구성 요소가 루트 구성 요소이기 때문에}}}}); </스크립트>하위 구성 요소의 입력 상자에 키가 팝업되면 표시된 내용은 다음과 같습니다.
상위 구성 요소의 입력 상자와 상위 구성 요소 (기본값은 1), 0입니다 (부모 구성 요소의 자식 속성에서 첫 번째 요소임을 나타냅니다), 부모 구성 요소가 루트 구성 요소이기 때문에 합동);
이러한 방식으로, 상호 작용은 구성 요소 트리에서 수행 될 수있다.
custom 이벤트 :
우선, 이벤트는 메소드 속성이 아닌 이벤트 속성에 배치해야합니다 (초보자가 할 수있는 실수). 메소드 속성의 이벤트는 트리거 될 수는 없지만 이벤트 속성에서만 이벤트를 트리거 할 수 있습니다.
둘째, 상향 분포와 하향 방송 사이에는 차이가 있습니다. 상향 분포는 같은 이름의 이벤트를 유발하는 반면, 하향 방송은 그렇지 않습니다.
셋째, 상향 분포와 하향 방송은 기본적으로 직접 라인 (조상과 손자 제외)에 대한 이벤트만을 유발하며 이벤트 반환 값이 사실이 아니라면이 라인에서 계속됩니다.
넷째,이 사건을 명시 적으로 이벤트라고 할 수 없습니다. 이벤트 이름.
샘플 코드 :
<div id = "app"> 부모 구성 요소 : <button @click = "parentclick"> 방송을 아래로 전파하려면 클릭하십시오 </button> <br/> 아동 구성 요소 1 : <children1> </children1> <br/> 다른 아동 구성 요소 1 : <다른 children1> </exager-children1> </div> <cript> var vm = new vu ({el : <at : ParentClick : this. $ broadcast ( "ParentClick", "ABC"); 값과 계속 분산되지 않음 : [ 'test'], 템플릿 : "<butty> children1 </button> </br> 하위 구성 요소 2 : <childrenclick : {childrenclick : console.log (childrenclick-Children1"); Console.log ( " + msg)}, 구성 요소 : {children2 : { 'test'], 템플릿 :"<button @click = 'findparent'> children-click </button. " Console.log (childrenclick-Children2 "), parentclick : console.log ("Parentclick-Children2 "); 아동 구성 요소의 구성 요소 : [ 'test'], 템플릿 : "<버튼> aerthchildren1 </button> </br> 다른 아동 구성 요소 2 : <childrenclick : {console.log (childrenclick-anotherchildren1); 콘솔. 이. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}설명 :
parent 부모 구성 요소의 버튼을 클릭하면 아래쪽으로 브로드 캐스트 한 다음 하위 구성 요소 1 자체, 다른 자식 구성 요소 1 및 다른 자식 구성 요소 2를 트리거합니다.
【2 ing 아동 구성 요소 2의 버튼을 클릭하면 아동 구성 요소 2의 이벤트와 아동 구성 요소 1의 이벤트가 트리거되지만 부모 구성 요소의 버튼을 트리거하지는 않습니다.
【3 ing 다른 아동 구성 요소 2의 버튼을 클릭하면 다른 아동 구성 요소 2의 이벤트, 다른 아동 구성 요소 1의 이벤트 1 및 부모 구성 요소의 이벤트가 트리거됩니다 (다른 아동 구성 요소 1의 반환 값이 사실이기 때문에).
VON을 사용하여 사용자 정의 이벤트를 바인딩합니다.
[1] 하위 구성 요소가 이벤트를 트리거 할 때 (이벤트의 메소드), 부모 구성 요소는 메소드 (부모 구성 요소 메소드의 메소드)도 실행합니다.
[2] 트리거 된 바인딩은 템플릿에 기록됩니다 (즉, 대체 된 템플릿 템플릿). 여러 자식 구성 요소는 부모 구성 요소 방법을 바인딩 할 수 있거나 다른 하위 구성 요소가 다른 부모 구성 요소 방법을 바인딩 할 수 있지만 동일한 자식 구성 요소 이벤트는 메소드를 바인딩 할 수 없습니다.
【3 child 하위 구성 요소는 메시지 전달에 대한 매개 변수를 발송합니다. 하위 구성 요소의 이벤트에 매개 변수가 없더라도 매개 변수를 부모 구성 요소로 전달하는 방법에 영향을 미치지 않습니다 (즉, 부모 구성 요소의 방법은 자식 구성 요소 방법으로 얻은 매개 변수를 수용 할 수 있습니다).
예를 들어 :
<div id = "app"> 상위 구성 요소 : <버튼> 브로드 캐스트를 전파하려면 클릭하십시오. 다중 바인딩은 동일한 하나에 결합 될 수 있거나 다른 바인딩이 다를 수 있지만 다중 바인딩은 하나에 결합 될 수 없지만 하나에 결합 할 수는 없습니다.> <children v-on : test = "parent" @test2 = "other"> </children> </div> <cript> var vm = new vue ({el : '#app', data : {val : 1}, methods : {console.log (arg) event ");}, 다른 : function () {console.log ("다른 메소드 ");}}, 구성 요소 : {children : {// 이것은 반환 값이 없으며 계속 배포되지 않습니다. function (this. $ emit) ( "테스트", '파견에 대한 인수'); </스크립트>④ 하위 구성 요소 인덱스
간단히 말해서 : 색인에서 하위 구성 요소를 직접 얻을 수 있으며 각 하위 구성 요소의 메소드를 호출 할 수 있습니다.
인덱스를 추가하는 방법은 다음과 같습니다. 태그에 V-Ref 추가 : 색인 이름
구성 요소를 호출하는 방법은 다음과 같습니다. vm. $ ref. 인덱스 이름
당신은 또한 이것을 사용할 수 있습니다. $ ref. 상위 구성 요소에서 직접 색인 이름입니다
현재 구성 요소를 얻을 수 있으며 구성 요소는 메소드를 호출하거나 데이터를 사용할 수 있습니다.
샘플 코드 :
<div id = "app"> 상위 구성 요소 : <button @click = "todo"> 이벤트 자식 구성 요소 트리거 </button> <br/> 하위 구성 요소 1 : <!-바인딩이 여기에 기록됩니다. 다중 바인딩은 동일하게 결합 될 수 있거나 다른 바인딩이 다를 수 있지만 다중 바인딩은 하나에 구속 될 수 없지만, <children v-ref : child> </children> </div> <cript> var vm = new vue ({el : '#app', methods : {todo : {this. $ refs.child.fromparent (); {// 이것은 반환 값이 없으며 소품을 계속 배포하지 않습니다. [ 'test'], 템플릿 : "<butty> children1 </button>", methods : {fortparent () {console.log ( "ref}}}}}); </스크립트>위는 VUEJS 기사 10th vuejs 부모-자녀 구성 요소 커뮤니케이션이 소개됩니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!