<! DOCTYPE HTML > < HTML LANG = "EN" > < 선두 > < 메타 캐릭터 = "UTF-8" > < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > < 메타 HTTP -equiv = "X-UA-지원" 내용 = "즉 = 엣지" > < 제목 > 문서 </ 제목 > < 스크립트 SRC = "./ lib 디렉토리 / VUE-2.4.0.js" > < > < 바디 > < DIV ID = "애플리케이션" > <! - 속성 (V-바인딩 : 폼 데이터를 결합하여 서브 어셈블리는, 상기 하위 조립체로 전달 될 때, 부모 구성 요소를들 수있다 내부 서브 어셈블리, 사용을위한 서브 어셈블리로 전송 특성 바인딩 형태 -> < COM1 V bind- : parentmsg = "MSG" > </ COM1 > </ DIV > < 스크립트 > // 뷰 제공 인스턴스를 생성 뷰 모델 VAR VM = 새로운 새로운 뷰 ({ EL : ' #app ' , 데이터 : { MSG : ' 123 아 - 데이터 부모 구성 요소 ' } 방법 :{} 구성 요소 : { // 결론 : 프리젠 테이션, 발견 후, 서브 어셈블리에있는 데이터의 상위 구성 요소의 데이터와 메소드에 액세스 할 수있는 기본 방법 COM1 : { 데이터 () { // 참고 : 데이터의 데이터 서브 어셈블리 같은 상위 구성 요소 만 개인 서브 어셈블리 자신에 의해 이상 전달되지 않습니다 : 다시, 데이터 본체 내부에 배치 할 수있는 데이터 요청, 아약스에 의해 서브 어셈블리; // 데이터에 데이터를 읽고 쓸 수 있습니다 ; 반환 { 제목 : ' 123 ' , 내용 : ' QQQ ' } } 템플릿 : ' <, 클릭 @ = "변경"의 H1은>이 하위 조립 parentmsg {} {} --- <의 / H1>는 '을 , // 참고 : 모든 소품 구성 요소의 데이터는 구성 요소의 부모 구성 요소를 통해 아이에게 전달되는 소품의 데이터, 읽기 전용, 재 할당 할 수 없습니다 // 소품 : [ ' parentmsg ' , // 부모 구성 요소는 parentmsg 속성을 통해 전달되고, 첫 번째 배열의 정의에 소품 것을, 그래서이 데이터를 사용하기 위해 지침 : {} 필터 : {}, 구성 요소 : {}, 방법을 { 변경 () { 이 본 .parentmsg = " 수정 된 " } } } } )} </ 스크립트 > </ 바디 > </ HTML >
<! DOCTYPE HTML > < HTML LANG = "EN" > < 선두 > < 메타 캐릭터 = "UTF-8" > < 메타 이름 = "뷰포트" 콘텐츠 = "폭 = 기기 폭 초기 스케일 = 1.0" > < 메타 HTTP -equiv = "X-UA-지원" 내용 = "즉 = 엣지" > < 제목 > 문서 </ 제목 > < 스크립트 SRC = "./ lib 디렉토리 / VUE-2.4.0.js" > < > < 바디 > < DIV 상술 ID = "애플리케이션" > <! - 아이 성분 배송 방법에 부모 구성 요소 사용 이벤트 결합기구; V-, 우리는 이벤트 속성을 정의하고 서브 어셈블리 어떤 방법으로,이 방법 통과 호출 할 수 있습니다 -> < COM2 @func = "쇼" > </ COM2 > </ DIV > < 템플릿 위에서 언급 한 id = "tmpl" > < DIV > < H1 > 이 서브 조립체이며 </ 중 H1 > < INPUT의 타입 = "버튼" 값 "=이것은 하위 버튼입니다 - 부모 컴포넌트 메소드 FUNC에서 전송을 실행하는 데 그것을 클릭 " @click ="MyClick "> </ 사업부 > </ 템플릿 > < 스크립트 > // 컴포넌트 입력하는 문자 템플릿 객체 정의 VAR COM2 = { 틀 : ' #tmpl ' , // 부하가가는 ID를 지정하여을,이 표시되는지 아이디 서식 파일 요소의 내용을 HTML로, 구조 구성 요소에 지정된 데이터 () { 반환 { {이름 : sonmsg ' 헤드 아들 ' : 나이 . 6 } } } 방법 : { MyClick () { // 클릭 어떻게 부모 구성 요소 FUNC 방법은이 방법을 통해 전달하고 전화를 얻는 버튼 하위? ? ? // 영어 원래 의도를 방출 : 트리거 전화, 출시 의미 // 다음은이 $ 방출 ( 'func123', 123, 456). 다음은이 $이 (. 방출 ' FUNC ' , 다음은이 .sonmsg를) } } } // 뷰의 인스턴스를 만들 수 뷰 모델의 VAR VM = 새로운 새로운 뷰 ({ EL : ' #app ' , 데이터 { datamsgFormSon : 널 } 방법 { 보기 (데이터) { // CONSOLE.LOG ( '방법은 부모 바디 어셈블리라고 보여 --- '+ 데이터) // 상기 CONSOLE.LOG (데이터) 이 본 .datamsgFormSon을= 데이터 } } 요소 { COM2 // COM2 : COM2 } }); </ 스크립트 > </ 몸 > </ HTML >