$의 심판에서 VUE는, $, 방출 사용 시나리오에 $

1. $은 사용 시나리오를 방출

통신 데이터를 상위 요소 조립체 및 방법을 호출

주 : 시간 서브 요소 태그는 대소 문자를 구분 사용없는 "-"분리

하위 구성 요소 :

<템플릿> 
  <의 Click = @ 버튼 " emitEvent " > 나는 </ 버튼> 클릭 
</ 템플릿> 
<스크립트> 
  내보내기 기본 { 
    데이터 () { 
      반환 { 
        MSG : " I 데이터 서브 어셈블리 " 
      } 
    } 
    방법 : { 
      emitEvent () { 
        다음은이 . $ EMIT ( ' 내 이벤트 ' , 다음은이 된 .msg)
         // 방법을 트리거 버튼 이벤트 및 사용자에게 $ EMIT 내 이벤트를 트리거하는 방법을 클릭하여이 
this.msg 데이터를 전송합니다. 
      } 
    } 
  }
 </ SCRIPT>

부모 요소 :

<템플릿> 
  <DIV ID는 = " 응용 프로그램은 " > 
    <MY-@ 아이-A 이벤트 = " getMyEvent " </ 어린이-A는>> 
    <! - 다음 상위 구성 요소 내 이벤트 이벤트를 모니터링, 그리고 방법에 의해 수행하는 것은 취할 전달 된 서브 어셈블리의 값 -> 
  </ div> 
</ 템플릿> 
<스크립트> 
  가져 오기 ChildA 에서  ' ./components/child.vue ' 
  내보내기 기본 { 
    구성 요소 : { 
      ChildA 
    }, 
    메소드 : { 
      getMyEvent (MSG) { 
          CONSOLE.LOG는 ( ' ---------> 수신 데이터 'MSG +) // 데이터 수신 ---------> I 데이터 서브 어셈블리
      } 
    } 
  }
 </ script>

2, 사용 $ 심판 장면

상기 방법은 부모 요소 조립체를 호출하여, 데이터가 전송 될 수있다

주 : 시간 서브 요소 태그는 대소 문자를 구분 사용없는 "-"분리

부모 요소 :

<템플릿> 
  <DIV ID = " 응용 프로그램 " > 
    <아이-A REF = " 아이 " > </ 아동 A> 
    <! -用심판给子组件起个名字-> 
    <버튼 @ 클릭 = " getMyEvent " >点击父组件</ 버튼> 
  </ DIV> 
</ 템플릿> 
<script> 
  수입 ChildA 에서  ' ./components/child.vue ' 
  수출 기본 { 
    구성 요소 : { 
      ChildA 
    }, 
    데이터 () { 
      반환 { 
        메시지 : "나는 부모 데이터 구성 요소이다 "  
      }
    ,} 
    방법 : { 
      getMyEvent () { 
          다음은이 . $ Refs.child.emitEvent ( 다음은이 된 .msg);
           // 메소드 호출 서브 어셈블리는, 아이의 이름, emitEvent 방법 서브 어셈블리의 상단 심판이다. 
      } 
    } 
  }
 </ SCRIPT>

하위 구성 요소 :

<템플릿> 
  <버튼> 나 </ 버튼> 클릭 
</ 템플릿> 
<스크립트> 
  내보내기 기본 { 
    방법 : { 
      emitEvent (MSG) { 
        을 console.log ( ' 수신 된 데이터 ---------> ' + MSG) // 데이터 수신 ---------> I 성분 상위 데이터이다 
      } 
    } 
  }
 </ script>

사용 시나리오 3. $

형제 요소 간의 데이터 전송의 상호

첫째, VUE의 빈 인스턴스를 생성 (형제 사이의 다리)

가져 오기보기 에서  ' 에 대한 ' 
      수출 기본적  새로운 보기 ()

서브 어셈블리의 childa

<템플릿> 
    <div> 
        <스팬>을组件-> {{MSG}} </ SPAN> 
        <input 타입 = " 버튼 " 값 = " 把组件数据传给B " @click = " 보내기 " > 
    </ DIV > 
</ 템플릿> 
<script> 
수입 vmson 에서  " ../../../util/emptyVue " 
수출 기본 { 
    데이터 () { 
        반환 { 
            MSG : { 
                A : ' 111 ' , 
                B : '(222) ' 
            }
        }  
    }
    방법 { 
        보내 함수 () { 
            . vmson $ (발광 " aevent " , 이 된 .msg)를 
        } 
    } 
}
 </ script>

서브 어셈블리의 childb

사용자 정의 이벤트 콜백을 듣고에 $ 의한 수신자는 데이터를 수신

<템플릿> 
 <div> 
    데이터 <SPAN> (B) 성분이, 패스가 -> {{MSG}} </ SPAN> 
 </ div> 
</ 서식> 
<script> 
      오기 vmson 에서  " ../../ ../util/emptyVue " 
      내보내기 기본 { 
         데이터 () { 
                반환 { 
                    메시지 : " " 
                } 
            } 
         장착 () { 
                . vmson $ ON ( " aevent " (발) => { // 이벤트를 수신 aevent, 콜백 함수 ; 화살표 기능 사용 
                    을 console.log (발을); //는 결과를 인쇄 : 나는의 데이터 요소입니다 
                    은이 .MSG = 브로;
                }) 
          } 
    }
 </ script>

부모 구성 요소

<템플릿> 
     <DIV> 
      <childa> </ childa>     
      <br /> 
      <childb> </ childb>       
     </ DIV> 
</ 템플릿> 
<script> 
   수입 childa 에서  ' ./childa.vue ' ; 
   수입 childb 에서  ' ./childb.vue ' ; 
   수출 기본 { 
       구성 요소 : { 
           childa, 
           childb 
       }, 
       데이터 () { 
           반환 { 
               메시지 : "" 
           } 
       }
           
</ script>

$의 심판에서 VUE는, $, 방출 사용 시나리오에 $

추천