Vue 2.0 에서 자주 사용 하 는 세 가지 전송 방식(부모 전송 자,자식 전송 부,비 부자 구성 요소 전송 값)

Vue 2.0 전송 방식:
Vue 의 프레임 워 크 개발 프로젝트 과정 에서 구성 요소 로 서로 다른 기능 을 관리 하고 일부 공공 구성 요소 가 추출 됩 니 다.이 럴 때 의문 과 수요 가 생 길 수 밖 에 없다?예 를 들 어 하나의 구성 요소 가 다른 구성 요 소 를 자신의 하위 구성 요소 로 호출 하면 우 리 는 어떻게 하위 구성 요소 에 값 을 전달 합 니까?전자상거래 사이트 시스템 개발 이 라면 카 트 옵션 도 다 뤄 질 수 있 고,이 럴 때 는 부자 가 아 닌 구성 요소 의 전 가 를 다 루 는 경우 도 있다.물론 당신 도 Vuex 상태 관리 도구 로 실현 할 수 있 습 니 다.이 부분 은 저희 가 나중에 따로 소개 하 겠 습 니 다.Vue 개발 에서 자주 사용 하 는 세 가지 전송 방식 을 먼저 소개 하 겠 습 니 다.
Vue 에서 자주 사용 하 는 세 가지 전송 방식 은 다음 과 같 습 니 다.
아버지
아버지
•비 부자 전도
홈 페이지 의 한 마디 를 참조 하 십시오.부자 구성 요소 의 관 계 는 prop 에서 아래로 전달 되 고 사건 이 위로 전달 되 는 것 으로 요약 할 수 있 습 니 다.부모 구성 요 소 는 prop 를 통 해 하위 구성 요소 에 데 이 터 를 보 냅 니 다.하위 구성 요 소 는 이 벤트 를 통 해 부모 구성 요소 에 메 시 지 를 보 냅 니 다.다음 그림 과 같 습 니 다.

다음 에 우 리 는 실례 를 통 해 좀 더 잘 알 수 있 을 것 이다.
1.부모 구성 요소 가 하위 구성 요소 에 값 을 전달 합 니 다.

부모 구성 요소:

<template>
 <div>
     :
  <input type="text" v-model="name">
  <br>
  <br>
  <!--       -->
  <child :inputName="name"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
  components: {
   child
  },
  data () {
   return {
    name: ''
   }
  }
 }
</script>

하위 구성 요소:

<template>
 <div>
     :
  <span>{{inputName}}</span>
 </div>
</template>
<script>
 export default {
  //        
  props: {
   inputName: String,
   required: true
  }
 }
</script>

2.하위 구성 요소 가 부모 구성 요소 에 값 전달

하위 구성 요소:

<template>
 <div>
     :
  <span>{{childValue}}</span>
  <!--              -->
  <input type="button" value="    " @click="childClick">
 </div>
</template>
<script>
 export default {
  data () {
   return {
    childValue: '        '
   }
  },
  methods: {
   childClick () {
    // childByValue     on     
    //      this.childValue      
    this.$emit('childByValue', this.childValue)
   }
  }
 }
</script>

부모 구성 요소:

<template>
 <div>
     :
  <span>{{name}}</span>
  <br>
  <br>
  <!--           on           -->
  <child v-on:childByValue="childByValue"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
  components: {
   child
  },
  data () {
   return {
    name: ''
   }
  },
  methods: {
   childByValue: function (childValue) {
    // childValue          
    this.name = childValue
   }
  }
 }
</script>

3.부자 가 아 닌 구성 요 소 를 전송 합 니 다.
부자 구성 요소 간 전송 값 이 아 닌 공공 인 스 턴 스 파일 bus.js 를 정의 하여 중간 창고 로 전송 해 야 합 니 다.그렇지 않 으 면 구성 요소 간 에 전송 값 의 효 과 를 얻 지 못 합 니 다.
공공 버스

//bus.js
import Vue from 'vue'
export default new Vue()

구성 요소 A:

<template>
 <div>
  A  :
  <span>{{elementValue}}</span>
  <input type="button" value="    " @click="elementByValue">
 </div>
</template>
<script>
 //      bug，          
 import Bus from './bus.js'
 export default {
  data () {
   return {
    elementValue: 4
   }
  },
  methods: {
   elementByValue: function () {
    Bus.$emit('val', this.elementValue)
   }
  }
 }
</script>

구성 요소 B:

<template>
 <div>
  B  :
  <input type="button" value="    " @click="getData">
  <span>{{name}}</span>
 </div>
</template>
<script>
 import Bus from './bus.js'
 export default {
  data () {
   return {
    name: 0
   }
  },
  mounted: function () {
   var vm = this
   //  $on       
   Bus.$on('val', (data) => {
    console.log(data)
    vm.name = data
   })
  },
  methods: {
   getData: function () {
    this.name++
   }
  }
 }
</script>

 총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 2.0 에서 자주 사용 하 는 값 전달 방식(아버지 가 자식 을 전하 고 아들 이 아버지 에 게 전 하 며 부자 가 아 닌 구성 요소 의 값 전달)입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 여러분 에 게 답 할 것 입 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!