VUE 부모 구성 요소는 서브 어셈블리 값을 전달 (방법)

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 
    < 메타 캐릭터 = "UTF-. 8" > 
    < 타이틀 > 부모 구성 요소는 서브 어셈블리에있어서 통과 </ 타이틀 > 
    < 스크립트 SRC에가 "= ./ vue2한다. 6.9.js " > </ 스크립트 > 
</ 머리 > 
< 몸 > 
< DIV 언급 된 ID 위 ="응용 프로그램 " > 
<! - 아이 컴포넌트 전달 방법에 부모 구성 요소, 메커니즘 바인딩 이벤트를 사용하여 V-On을 때 우리의 사용자 정의 이벤트 속성 후, 서브 어셈블리는이 방법에 전달 몇 가지 방법으로 전화를 할 수있을 것입니다 ->
    < COM2 @func= "보여" > </ COM2 > 
</ DIV >

< 템플릿 언급 ID 상술 = "TEMPL" > 
    < DIV > 
        < H1 > 이것은 부성분 </ H1 > 
        < 의 INPUT   유형 = "버튼" 값 = "FUNC 방법을 통해 전달이 트리거링, 그것을 클릭 버튼의 부성분 인" @click = "MyClick" /> 
    </ DIV > 
</ 템플릿 > 
</ 몸 > 
< 스크립트 > 
    // 정의 컴포넌트 입력하는 문자 템플릿 객체 
    VAR COM2 = {
        서식 : ' #templ ' , // ID을 지정하여,이 부하되는 구성 요소 HTML로 지정된 템플릿 ID에 소자가는 것을 나타낸다 
       데이터 () {
             창 {
                sonmsg : {
                    이름 : " 홍길동 " ,
                    연령 : 18
                }
            }
       },
        방법 : {
            myclick () {
                // EMIT '호출 트리거, 발사' 
                 은이 . $ EMIT ( " FUNC " , 다음은이 .sonmsg)

            }
        }
    }

    이었다 VM =  새로운 뷰 ({
        에 : ' #app ' ,
        데이터:{
           datamsgFromSon : 제로 ,
        },
        행동 양식:{
            {(데이터)를 보여
                CONSOLE.LOG ( " 호출 어셈블리 ----- 부모의 본문의 표시 방법 " + 데이터)
                 이 본 .datamsgFromSon = 데이터;
                CONSOLE.LOG (데이터)
            }
        },
        구성 요소 : {
            COM2
        }
    })
</ 스크립트 > 
</ HTML >

렌더링

<! DOCTYPE HTML > 
<HTML LANG = "EN" > 
<head> 
    <메타 캐릭터 = "UTF-. 8" > 
    <TITLE> 부모 그룹 에있어서, 부재 에 전달되는 서브 그룹 멤버 </ TITLE> 
    <script SRC에 = "./ vue2.6.9.js " > </ script> 
</ head> 
<body> 
<div ID ="애플리케이션 " > 
<! - 부모 그룹 서브 부재에 그룹 멤버 전송 방법 ,이벤트 사용 에 묶여 주어진 메커니즘을 V-에 때 나는 이 정의 -defined이벤트 속은 등록 후에는 , 다음 그것을 서브 - 그룹 멤버 수 있을 통해 통해 몇 가지 방법 조정할 전사 공급 받는 이 방법 > - <COM2 @func = "쇼" > </ COM2> </ div> <를 템플릿 ID = "TEMPL" >     <div>         <H1의> 서브이다 그룹 상품 </ H1>의         <INPUT의   타입 = "버튼" 값 = " 이 서브되는 그룹 프레스의 멤버 버튼 , 포인트는 이를 히트 ,트리거 넘어 갔다






FUNC의 방법 " @click ="MyClick " /> 
    </ div> 
</ 템플릿> 
</ BODY> 
<script> 
// 주어진 의미 번째 문자 클래스 형 그룹 멤버 템플릿 에 대한 객체 VAR COM2 = { 템플릿 : '#templ' , // 패스 를 통해 지정하는 일 ID를 나타냅니다 말했다 추가 할 예정 이에 포함 지정된 ID 의 템플릿 요소 내 컨텐츠 , 때 수행 그룹 멤버 HTML을

        구조 
데이터 () { 
            반환 { 
                sonmsg : { 
                    이름 : ' 장 세 ' , 
나이 : 18
 } 
            } 
       } , 
메소드 : { 
            MyClick () { 
                // EMIT ' 톤 으로 , 트리거 , 헤어 방출 ' 
은이 . $ EMIT ( "FUNC " 은이 . sonmsg는 ) 

            } 
        } 
    } 

    VAR VM은 = 새로운 새로운 뷰 ({ 
        EL은: '#App' , 
데이터 { 
           datamsgFromSon : NULL,
 } , 
방법 { 
            보기 (데이터) { 
                콘솔 . 로그 ( " 튜닝 부모와 그룹 멤버 본체 표시 방법 -----" + 데이터) 
                은이 . DatamsgFromSon 데이터 = ; 
콘솔 . 로그 (데이터) 
            } 
        } , 
구성 요소 : { 
            COM2
 } 
    }) 
</ SCRIPT> 
</ HTML>

VUE 부모 구성 요소는 서브 어셈블리 값을 전달 (방법)

추천