Vue 2.0 vue-cli+webpack 부자 구성 요소 통신 기반(인 스 턴 스 설명)

git 명령 행 에서 다음 명령 을 실행 하여 환경 구축 을 완료 합 니 다.
1,npm install--global vue-cli vue 명령 행 도구 설치
2,vue init webpack vue-demo 는 vue 명령 을 사용 하여 웹 팩 프로젝트 를 생 성 합 니 다.프로젝트 이름 은 vue-demo 입 니 다.

3,cd vue-demo 항목 삽입
4,npm install 설치 package.json 의 모든 의존 패키지
5,npm run dev 실행 항목
1.부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
그리고 기본 Hello.vue 구성 요 소 를 삭제 하고 App.vue 를 다음 과 같이 정리 합 니 다.

<template>
 <div id="app">
       app
 </div>
</template>

<script>
 export default {
 name : 'app'
 }
</script>

<style>

</style>

router 아래 index.js 파일 을 다음 과 같이 수정 합 니 다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
 {
  path: '/',
 }
 ]
})

1.components 디 렉 터 리 에 하위 구성 요소 Child.vue 만 들 기
코드 는 다음 과 같 습 니 다:

<template>
 <div>
  <h3>     </h3>
  <p>{{content}}</p>
 </div>
</template>
<script>
export default {
 props : ['content']
}
</script>

2.App.vue 의 코드 를 다음 과 같이 수정 합 니 다.

<template>
 <div id="app">
 <child :content="msg"></child>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
  return {
  'msg' : '          '
  }
 },
 components : {
  child
 }
 }
</script>

이렇게 하면 부모 구성 요소 가 props 속성 을 통 해 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
v-bind 로 속성 을 바 꿀 수도 있 습 니 다.

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg"></child>
 </div>
</template>

소결:
하위 구성 요 소 는 props 에서 부모 구성 요소 가 보 내 는 값 을 받 기 위해 속성 을 만 듭 니 다.
부모 구성 요소 에서 하위 구성 요 소 를 호출 합 니 다.
하위 구성 요소 탭 에 하위 구성 요소 props 를 연결 하여 만 든 속성
하위 구성 요소 에 전달 할 값 을 이 속성 에 부여 합 니 다.예 를 들 어 위의 부모 구성 요소 의 msg 와 같 습 니 다.
2.하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.
1.Child.vue 를 다음 과 같이 수정 합 니 다.

<template>
 <div>
  <h3>     </h3>
  <p>{{content}}</p>
  <p>
   <input type="button" value="        " v-on:click="send">
  </p>
 </div>
</template>
<script>
export default {
 props : ['content'],
 methods : {
  send(){
   this.$emit( 'ParentRecEv', "  ,     ghostwu  vue2.0" )
  }
 }
}
</script>

하위 구성 요 소 는$emit 를 통 해 사용자 정의 이벤트 ParentRecEv 를 보 냅 니 다.다음 매개 변 수 는 내용 입 니 다.
2,App.vue 는 다음 과 같이 수정

<template>
 <div id="app">
 <child :content="msg"></child>
 <child v-bind:content="msg" v-on:ParentRecEv="showMsg"></child>
 <p>{{data}}</p>
 </div>
</template>

<script>
 import child from './components/Child.vue';
 export default {
 name : 'app',
 data(){
  return {
  'msg' : '          ',
  data : ''
  }
 },
 methods : {
  showMsg( msg ){
  this.data = msg;
  }
 },
 components : {
  child
 }
 }
</script>

두 번 째 하위 구성 요소 감청 이벤트 ParentRecEv 에 서 는 하위 구성 요소 가 단 추 를 누 르 면 이 사용자 정의 이 벤트 를 촉발 하고 쇼 msg 함 수 를 터치 하면 하위 구성 요소 가 전달 하 는 데 이 터 를 받 을 수 있 습 니 다.사용자 정의 이벤트 가 연결 되 어 있 지 않 으 면 하위 구성 요소 가 보 내 는 정 보 를 받 을 수 없습니다.
소결:
하위 구성 요소 에서$emit 를 통 해 사용자 정의 이 벤트 를 실행 합 니 다.
전송 할 값 을$emit 의 두 번 째 매개 변수 로 합 니 다.이 값 은 부모 구성 요소 의 방법 으로 받 아들 입 니 다.
부모 구성 요소 에서 하위 구성 요 소 를 호출 하고 하위 구성 요소 탭 에 연 결 된 사용자 정의 이벤트
그들의 공통점 은 다리 가 있다 는 것 이다.아들 이 아버지 에 게 주 는 다 리 는 사용자 정의 이벤트$emit 이 고,아버지 가 아들 에 게 주 는 다 리 는 props 의 속성 이다.이것 이 바로 그들 사이 에 데 이 터 를 전달 하 는 관건 이다.
이 Vue 2.0 은 vue-cli+webpack 부자 구성 요소 통신(인 스 턴 스 설명)을 바탕 으로 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.