Vue 의 서로 다른 장면 에서 구성 요소 간 의 데이터 교 류 를 깊이 분석 하 다.

본문
Vue 서로 다른 장면 에서 구성 요소 간 의 데이터'교류'에 대해 논 하 다. 
Vue 의 공식 문 서 는 매우 상세 하 다 고 할 수 있다.내 가 보기에 이것 은 react 등 다른 프레임 워 크 문서 와 마찬가지 로 이야기 하 는 방식 은'방법론'이지'장면 론'이 아니다.이것 은 우리 가 문 서 를 여러 번 읽 은 후에 코드 를 쓰 는 것 은 많은 곤혹 을 느 낄 수 밖 에 없다.왜냐하면 우 리 는 그 중의 일부 지식 점 의 활용 장면 을 모 르 기 때문이다.이것 이 바로 제 가 이 글 을 쓰 는 목적 입 니 다.서로 다른 장면 에서 구성 요소 간 의 데이터'교류'의 Vue 실현 을 연구 하 는 것 입 니 다.
부자 구성 요소 간 데이터 교류
부자 구성 요소 간 의 데이터 교 류 는 두 가지 로 나 눌 수 있다.
1.부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.
2.하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.
부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 합 니 다.props
이것 은 구성 요소 데이터 소통 에서 가장 흔히 볼 수 있 는 장면 입 니 다.부모 구성 요소 에 게 데이터 원본 을 파악 한 다음 에 하위 구성 요소 에 전달 하여 하위 구성 요소 가 사용 하도록 합 니 다.

많은 사람들 이 이것 은 매우 간단 하 다 고 말 할 것 이다.소품 쓰 잖 아!맞 아,그 렇 기 때문에 그것 은 내 가 말 하고 자 하 는 주요 내용 이 아니 지만 우 리 는 코드 로 간단하게 한 번 보 았 다.
부모 구성 요소

<template>
 <div id="father">
 {{ '     ' }}
 <son :text = "text"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 text: '         '
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
</style> 

하위 구성 요소:

<template>
 <div>
 {{ '     ，    ' + text }}
 </div>
</template>
<script>
export default {
 props: {
 text: { type: String, default: '' }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

demo:

이 demo 에서 우 리 는"부모 구성 요소 에서 전 달 된 데이터"라 는 문자열 을 props 를 통 해 하위 구성 요소 에 전달 합 니 다. 
하위 구성 요소 에서 부모 구성 요소 의 데 이 터 를 바 꾸 려 면 부모 구성 요소 에서 부모 구성 요소 의 데 이 터 를 바 꿀 수 있 는 함 수 를 정의 한 다음 props 를 통 해 이 함 수 를 하위 구성 요소 에 전달 하고 하위 구성 요소 가 적당 한 시기 에 이 함 수 를 호출 하여 하위 구성 요소 에서 부모 구성 요소 데 이 터 를 바 꾸 는 효 과 를 낼 수 있 습 니 다.
하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.
하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.   방식 1:반전 인삼
부모 구성 요소:

<template>
 <div id="father">
 {{ '     ,   ' + componentName }}
 <son :changeComponentName = "changeComponentName"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 componentName: '  A'
 }
 },
 methods: {
 changeComponentName: function (newComponentName) {
 this.componentName = newComponentName
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border: 1px solid gray;
 }
</style> 

하위 구성 요소:

<template>
 <div>
 <p>     ：  button</p>
 <button @click="() => changeComponentName(newComponentName)">
           ：      
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 newComponentName: '      '
 }
 },
 props: {
 changeComponentName: {
 type: Function,
 default: () => { }
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

demo:
클릭 전:

클릭 후:

도해:

하위 구성 요소(단추)를 누 르 면 부모 구성 요소 의 이름 을'A'에서'팽 호 만 구성 요소'로 변경 합 니 다.
부모 구성 요소 에서 하위 구성 요소 에 함수(changeComponentName)를 전 달 했 습 니 다.또한 하위 구성 요소 가 이 함 수 를 호출 할 때 하위 구성 요소 내부 의 데이터(new ComponentName)를 매개 변수 로 전달 합 니 다.부모 구성 요소 에서 정의 하 는 함수(changeComponentName)는 하위 구성 요소 가 전달 하 는 매개 변 수 를 가 져 올 수 있 습 니 다. 
[PS]이름 이 길 어서 죄송합니다.
하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 합 니 다.   방식 2:사용자 정의 이벤트
부모 구성 요소:

<template>
 <div id="father">
 <div>
 {{ '     ,     :' + fatherComponentName }}
 <son v-on:changeComponentName = "changeComponentName"></son>
 </div>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 fatherComponentName: 'A  '
 }
 },
 methods: {
 changeComponentName: function (componentName) {
 this.fatherComponentName = componentName
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border:1px solid grey;
 }
</style>

하위 구성 요소:

<template>
 <div>
 <p>     :    </p>
 <button @click="clickCallback">
          ：      
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 fatherComponentName: '      '
 }
 },
 methods: {
 clickCallback: function () {
 this.$emit('changeComponentName', this.fatherComponentName)
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 demo:
클릭 전:

클릭 후:

 도해:

$emit(event,[...매개 변수])를 통 해 모든 매개 변 수 는 모니터 에 전 달 됩 니 다.즉,부모 구성 요소 에서 정의 하 는 changeComponentName 방법 으로 하위 구성 요소 에서 부모 구성 요소 에 전 달 됩 니 다.
형제 구성 요소 간 데이터 교류(공통 부모 구성 요소 가 있 는 형제 구성 요소)
부모 구성 요소:

<template>
 <div id="father">
 <div>
 {{ '     :father' }}
 <eldest-son :text = "text"></eldest-son>
 <youngest-son :changeText="changeText"></youngest-son>
 </div>
 </div> 
</template>
<script>
import eldestSon from './eldestSon.vue'
import youngestSon from './youngestSon.vue'
export default {
 data: function () {
 return {
 text: '      '
 }
 },
 methods: {
 changeText: function () {
 this.text = '           '
 }
 },
 components: {
 eldestSon: eldestSon,
 youngestSon: youngestSon
 }
}
</script>
<style>
 #father div{
 border: 1px solid grey;
 padding: 10px;
 margin: 10px;
 }
</style>

형제 구성 요소 1:

<template>
 <div>
 <p>      ：eldestSon</p>
 <p>        text：{{ text }}</p>
 </div>
</template>
<script>
export default {
 props: {
 text: {
 type: String,
 default: ''
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

형제 구성 요소 2:

<template>
 <div>
 <p>      ：youngestSon</p>
 <button @click="changeText">  eldestSon        </button>
 </div>
</template>
<script>
export default {
 props: {
 changeText: {
 type: Function,
 default: () => {}
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 클릭 전:

클릭 후:

 도해:

만약 두 형제 구성 요소 사이 에 이러한 데이터 관계 가 존재 한다 면,우 리 는 공 통 된 부모 구성 요 소 를 찾 아 데이터 와 관련 방법 을 부모 구성 요소 내부 로 향상 시 키 고,두 개의 하위 구성 요소 에 아래로 전달 할 수 있 습 니 다. 
이렇게 해서 그 중의 한 하위 구성 요 소 는 데 이 터 를 얻 었 고 다른 하위 구성 요 소 는 데 이 터 를 바 꾸 는 방법 을 얻 으 면 상기 데이터 소통 을 실현 할 수 있다. 
[주의]이런 장면 은 한계 가 존재 하 는데 두 구성 요소 에 공 통 된 부모 구성 요소 가 있어 야 합 니 다.이런 장면 이외 의 처리 방법 에 대해 서 는 다음 글 을 보십시오.
전역 구성 요소 간 데이터 교류-Vuex
제 가 상기 한 많은 장면 에서 props 나 함수 전달 방식 으로 구성 요소 간 의 데이터 소통 을 처리 합 니 다.그러나 약간의 대형 응용 에서 그것들 은 모두 약속 이나 한 듯 이 우리 에 게 매우 큰 번 거 로 움 을 가 져 왔 다.
예 를 들 면:
1.props 를 통 해 부모 구성 요소 에서 하위 구성 요소 로 데 이 터 를 전달 합 니 다.
직접적인 부자 관계 의 구성 요소 에 대해 데이터 흐름 은 매우 간결 하고 명확 해 보이 지만 대형 응용 프로그램 에서 우리 가 상하 에 많은 구성 요 소 를 끼 워 넣 을 때 이것 은 우리 의 코드 가 매우 번 거 롭 고 유지 하기 어렵다. 
2.공통 적 인 부모 구성 요소 가 없 는 형제 구성 요소 에 대해 서 는 함수 가 전달 하 는 데이터 전달 방식 도 어 쩔 수 없습니다.Vue 문서 에 서 는$emit 와$on 함 수 를 기반 으로 하 는'이벤트 버스'를 통 해 데 이 터 를 소통 할 수 있 지만 더 큰 응용 에 대응 할 수 없습니다. 
이때 Vuex 는 전체 구성 요소 간 데이터 교 류 를 실현 하 는 가장 좋 은 방안 이 되 었 다.
Vuex 는 모든 최상 위 상 태 를 포함 하 는 단일 데이터 원본(state)을 가지 고 있 습 니 다.
1.모든 구성 요 소 는 이 단일 데이터 원본 의 데 이 터 를 사용 할 수 있 습 니 다.
2.모든 구성 요 소 는 배포 동작(actions)을 통 해 이 단일 데이터 원본 의 데 이 터 를 수정 할 수 있 습 니 다. 

'많은 시행 착 오 를 걸 어야 만 소통 이 가능 한 데이터 흐름 을 단번에 가장 짧 은 지름길 을 찾 았 다 
View 층 의 데이터 와 model 층 의 결합 을 실현 합 니 다.
1,2 소절 에서 처리 되 는 데이터(Vue)와 3 소절 에서 처리 되 는 데이터(Vuex)는 두 가지 유형의 데이터 가 많 고 전 자 는 View 층 에 속 하 며 단순 한 UI 전시 만 담당 하 며 model 층 은 백 엔 드 에서 취득 한 후 주입 되 는 데이터 가 대부분이다. 
한 가지 제안:
1.Vue 부분의 코드 는 View 층 구축 을 책임 집 니 다.
2.Vuex 부분의 코드 는 model 층 을 구축 하 는 것 을 책임 집 니 다.
(상기 Vue 는 Vuex 이외 의 프레임 시스템 을 말 합 니 다)
상기 두 가 지 를 바탕 으로 특정한 부분의 코드 를 Vue 에 쓸 지 Vuex 에 쓸 지 결정 하고 이들 을 최대한 분리 하여 View 층 과 model 층 의 디 결합 을 실현 하여 전단 코드 의 유지 가능성 과 확장 성 을 향상 시킨다.
총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 의 서로 다른 장면 에서 구성 요소 간 의 데이터 교류 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!