Vue 의 부자 구성 요소 전송 값 을 자세히 설명 합 니 다.

간략하게 소개 하 다
부자 구성 요소 간 의 전 가 는 주로 세 가지 가 있 습 니 다.전달 수치,전달 방법,전달 대상 은 주로 하위 구성 요소 의 props 속성 으로 전 가 를 받 습 니 다.다음은 각각 소개 합 니 다.
(1)전달 수치
1.하위 구성 요소:Header.vue

<template>
 <div>
  <!-- data       msg   ，              msg    -->
  <h2>{{msg}}</h2>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 //        
 props: ['msg']
}
</script>

이 를 통 해 알 수 있 듯 이 하위 구성 요소 의 data 대상 에는 msg 속성 이 없습니다.여 기 는 부모 클래스 가 전달 하 는 msg 속성 을 호출 합 니 다.수신 은 props:[msg]입 니 다.
2.부모 구성 요소 홈.vue

<template>
 <div>
  <!-- 2.     ，        -->
  <v-head :msg="msg"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.     
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '      '
  }
 },
 methods: {
 },
 components: {
  "v-head": Head
 },
 //          
 mounted() {
 }
}
</script>

값 을 전달 하 는 핵심 사상 은 하위 구성 요 소 를 사용 하 는 곳 에 전달 할 값 을 더 하 는 것 이다.<v-head :msg="msg"></v-head>(2)전달 방법
전달 방법의 작성 방법 은 전달 수치 와 마찬가지 로 관건 적 인 절차 만 적 습 니 다.
부모 구성 요소

<template>
 <div>
  <!-- 2.     ，        -->
  <v-head :run="run"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.     
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '      '
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 //          
 mounted() {
 }
}
</script>

하위 구성 요소

<template>
 <div>
  <button @click="run">        </button>
 </div>
</template>
<script>
export default {
 data() {
  return {
  }
 },
 methods: {
 },
 //        
 props: ['run']
}
</script>

(3)전달 대상
전달 대상 의 작성 방법 은 전달 수치 와 마찬가지 로 관건 적 인 절차 만 적 습 니 다.
부모 구성 요소

<template>
 <div>
  <!-- 2.     ，       ，    this    Home    -->
  <v-head :home="this"></v-head>

  <br>
  <br>
 </div>
</template>

<script>
// 1.     
import Head from './Head.vue';

export default {
 data() {
  return {
   msg: '      '
  }
 },
 methods: {
  run() {
   alert(this.msg);
  }
 },
 components: {
  "v-head": Head
 },
 //          
 mounted() {
 }
}
</script>

하위 구성 요소

<template>
 <div>
  <!-- data       msg   ，              msg    -->
  <h2>{{msg}}</h2>
  <br>
  <br>
  <button @click="run">        </button>
 </div>
</template>
<script>
export default {
 data() {
  return {
   //       home   msg  
   msg: this.home.msg
  }
 },
 methods: {
  run() {
   //       home   run()  
   this.home.run();
  }
 },
 //        
 props: ['home']
}
</script>

(4)전달 수치 형식 검사

props: {
  'home': Object
 }

다른 건 위 와 비슷 해!
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 Vue 의 부자 구성 요소 의 전달 치 를 상세 하 게 통합 시 키 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!