VUE 연구 다섯 깊이있는 구성 요소의 이해 (아버지와 아들 구성 요소 사이의 값을 기준으로)

 

마지막 장을 기록하는 방법 부모 어셈블리의 하위 구성 요소에 값을 전달하지만, 실제 응용 프로그램에서 종종 하위 구성 요소는 상위 구성 요소에 데이터를 전달해야합니다, 우리는이 시간을 수행하는 방법

 1. V-에 부모 구성 요소 내에서 이벤트 리스너 서브 어셈블리 및 데이터 전송 EMIT $ 서브 어셈블리를 사용하여

 

// 상위 구성 요소 
<템플릿> 
  <DIV 위에서 언급 한 id = "홈"> 
    <COM 테스트 = '12345'TEST2 = '1213232111111'@ a_even = "a_even"> 이벤트에 대한 </ COM> // 사용 V-에 모니터 서브 어셈블리! V-에 약기 
  </ DIV> 
</ 템플릿> 

<스크립트> 
가져 오기 COM에서 "../components/a_component" ; 
내보내기 기본 { 
  이름 : "홈" , 
  구성 요소 : { 
   COM 
  }, 
  메소드 : { 
    a_even (E) { 
      CONSOLE.LOG ( '짝수' , E) // E의 값은, 그 서브 어셈블리 내에 이벤트 파라미터 a_even 이벤트 
    } 
  } 
}
 </ script>

    A1) } 
  } 
}; </ script>
    

    

VUE 2.이 방법에 정의 된 모든 메소드는, 현재 시점 컴포넌트 인스턴스들은이 기능 참조 소품 방식에있어서의 통과 대역을 사용하여

// 부모 요소 
<템플릿> 
  <DIV ID = "홈"> 
    <COM : base_f = "base_f"> </ COM> // 서브 - 어셈블리에 전달 된 매개 변수 소품으로 base_f 말하기 
  </ DIV> 
</ 템플릿> 

<스크립트 > 
가져 오기 COM에서 "../components/a_component" ; 
내보내기 기본 { 
  이름 : "홈" , 
  구성 요소 : { 
   COM 
  } 
  방법 : { 
    base_f (옵션) { // 관계없이 곳이 호출의 방법에 정의 된 방법, 열이 정의 될 때 해당 메서드 정의 방법, 다시 한번 말을하지, 스스로를 검색 할 수 있습니다 () 관심이있는 학생의 JS 방법을 결합하기 때문에 요점은, 사실, 그것은이다 
      CONSOLE.LOG (옵션) / / 인쇄 하위 구성 요소가 전달 된 매개 변수 base_f 호출입니다 
      콘솔.(이) 부모 구성 요소의 현재 인스턴스 인쇄 로그 // 

    } 
  } 
}
 </ script>

<템플릿> 
  <DIV 클래스 = "a_component 랩"> 
    <H1> 
      {{A1}}
     </ H1> 
    <입력 V 모델 = "A1"/> 
  </ div> 
</ 템플릿> 

<script> 
수출 기본 { 
  이름 : "aComponent의" , 
  소품 : { 
    base_f : { 
      유형 : 기능, //定义接收的소품 
    } 
  }, 
  데이터 () { 
    반환 { 
      A1 : "" 
    } 
  }, 
  시계 : { 
    A1 () { 
      VM을하자 = 이 ;
      이 .base_f (vm.a1);
    } 
  } 
}; 
</ script>

이 방법은 JS 폐쇄를 포함,이 점은 어린이 신발 꽤 JS 소득이없는 깊은 참여에 대한 이유를 이해하기. 그러나 일반적으로 실제 사용 또는는 예 언급 할 가치가있다, 첫 번째 방법을 권장합니다. 이 전송 방식의 값이, 상위 요소 base_f 상태를 변경하는 경우, 주어진 VUE을 일으킬 가능성이

기존의 값 사이에 조립 3 형제

 또한 제 부모 컴포넌트 서브 어셈블리의 값을 전달하고 상위 성분 B 성분에 대한 값을 전달, 조합으로 구현 될 수있는 상기 방법에 의해 얻어진 형제 통과 성분 사이의 값이된다.

우리는 공통의 상태 로더가 매우 필요하다하도록 관리 할 수 ​​있다면이 너무 많은 문제가, 그래이 vuex입니다,이 모든 시간이었다