초 상세 vue 구성 요소 간 통신 총화

머리말
구성 요소 통신 은 우리 가 평소에 개발 하 는 과정 에서 특히 vue 와 react 에서 매우 중요 한 위 치 를 차지한다.이 편 은 vue 에서 구성 요소 간 통신 의 몇 가지 방식 을 요약 할 것 입 니 다.

props、$emit

$parent、$children

$attrs、$listeners

provide、inject

eventBus

vuex

로 컬 저장 소
1.props,$emit 단 방향 데이터 흐름

father.vue:

<template>
  <div>
    <div>    ：<input type="button" value="  " />    ： {{num}}</div>
    <son :num="num" @change="change"></son>
  </div>
</template>

<script>
import son from "./son.vue";
export default {
  name: "Father",
  components: {
    son,
  },
  data() {
    return {
      num: 1,
    };
  },
  methods:{
    change(val){
      this.num = val
    }
  }
};
</script>

son.vue:

<template>
  <div>    ：<input type="button" value="  " @click="change"/>   ：{{num}}</div>
</template>

<script>
export default {
  name: "App",
  components: {},
  props: {
    num: {
      default: 0,
    },
  },
  created() {},
  methods: {
    change(){
      // this.num = 2  props        ，             num    　　　　//    $emit  change  ，father    change  　　　　this.$emit('change', 2)
    }
  },
};
</script>

위의 장면:하위 구성 요소 의 change 사건 은 부모 구성 요소 의 특정한 값 을 수정 하기 위 한 것 일 뿐 다음 과 같은 몇 가지 방법 이 있 습 니 다.
1.부모 구성 요소 가 하위 구성 요소 에 연 결 된 이벤트 에 화살표 함 수 를 사용 합 니 다.

father:
<son :num="num" @change="val => num = val"></son>

son:
this.$emit('change', 2)

2.update:num 과.sync

father:

<son :num.sync="num"></son>

son:

this.$emit('update:num', 2)//update      ,    

3.v-model
props 와 연 결 된 이벤트 수정:

father：<son :value="num" @input="val => num = val"></son>son：this.$emit('input', 2) 
  v-model  ：<son v-model="num"></son>

2.$parent,$children
$parent,$children 은 부자 구성 요소 에서 각자 의 방법 과 데 이 터 를 직접 호출 할 수 있 습 니 다.
하위 구성 요소 에서 직접:this.$parent.num=2
부모 구성 요소 중$children 은 배열 이기 때문에 구체 적 으로 어떤 하위 구성 요소 가 직관 적 이지 않 은 지$refs 로 하위 구성 요 소 를 조작 할 수 있 습 니 다.
vue 정 부 는 이러한 통신 방식 을 사용 하 는 것 을 추천 하지 않 습 니 다.
3.$attrs,$listeners
$attrs 는 부모 구성 요소 가 전달 하 는 속성 을 가 져 올 수 있 습 니 다:

<div>    ：<input type="button" value="  " @click="change"/>   ：{{$attrs}}</div>

dom 노드:

$attrs 는 전 달 된 속성 을 해당 하 는 탭 에 직접 올 리 고,반대로 props 는 그렇지 않 습 니 다.탭 에 있 는 이 속성 들 을 제거 하려 면 inheritatters 를 사용 하 십시오:

주의해 야 할 것 은 props 의 우선 순위 가$attrs 보다 크다 는 것 입 니 다.즉,props 가 존재 할 때$attrs 는 빈 대상 입 니 다.

$attrs 는 여러 단계 의 구성 요소 에 속성 을 전달 하 는 데 사 용 됩 니 다.예 를 들 어 조손 구성 요 소 는 부모 구성 요소 로 중간 전 환 됩 니 다.
father:

<son v-bind="$attrs"></son>

$attrs 는 속성 등급 을 뛰 어 넘 는 전달 에 사용 되 며,방법 등급 을 뛰 어 넘 는 전달 은$listeners 를 사용 합 니 다.
grandFather.vue：

<template>
  <div>
    <div>    :    ：{{nums}}</div>
    <father :nums="nums" @up="up" @down="down"></father>
  </div>
</template>

<script>
import father from "./father.vue";
export default {
  name: "App",
  components: {
    father,
  },
  data(){
    return {
      nums:0
    }
  },
  methods: {
    up() {
      alert('up')
    },　　down() {　　　alert('down')　　},
  },
};
</script>

father.vue:

<son v-bind="$attrs" v-on="$listeners"></son>

son.vue:

<div>    ：<input type="button" value="  " @click="$listeners.up"/></div>

넷 째,provide,inject
이 옵션 은 조상 구성 요소 가 모든 자손 후대 에 의존 을 주입 할 수 있 도록 함께 사용 해 야 합 니 다.구성 요소 의 차원 이 아무리 깊 어도 상하 관계 가 성립 되 는 시간 내 내 유효 합 니 다.
provide 옵션 은 대상 이나 대상 을 되 돌려 주 는 함수 여야 합 니 다.
inject 옵션 은 문자열 배열 이나 대상 이 어야 합 니 다.
App:

...

export default {
  provide(){
    return {vm: this}
  },

...

son:

...

export default {
  inject: ['vm'],　data(){},　mounted(){　　console.log(this.vm) }

...

메모:provide 와 inject 바 인 딩 은 응답 할 수 있 는 것 이 아 닙 니 다.이것 은 애 써 한 것 이다.그러나 감청 가능 한 대상 이 들 어 왔 다 면 대상 의 property 는 응답 할 수 있 습 니 다.
inject 주입 중의 값 은 구성 요 소 를 따라 위로 찾 아'접근 원칙'에 따른다.
provide 와 inject 의 데이터 흐름 은 양 방향 입 니 다.
5.이벤트 버스(이벤트 버스)
이벤트 버스 는 구독 전역 이 벤트 를 게시 함으로써 다른 구성 요소 에서 사용 할 수 있 습 니 다.
main.js 에서:

Vue.prototype.$bus = new Vue();

parent.vue:

<template>
  <div>
    <son1></son1>
    <son2></son2>
  </div>
</template>

<script>
import son1 from './son1.vue'
import son2 from './son2.vue'
export default {
  name: 'parent',
  components: {
    son1,
    son2
  },
  created(){
     this.$bus.$on('busEvent',(v)=>{
      console.log(v);
    })
  },
  beforeDestroy(){
    this.$bus.off('busEvent')
  }
}
</script>

son1 과 son2 의 mounted:

son1:mounted(){
  this.$bus.$emit('busEvent','son1  ')
}son2:mounted(){  this.$bus.$emit('busEvent', 'son2  ')}

인쇄 결과:

이벤트 버스 를 사용 하려 면 세 가지 주의 가 필요 합 니 다.1.$bus.on 은 created 갈고리 에서 사용 해 야 합 니 다.mounted 에서 사용 하면 다른 구성 요소 가 created 갈고리 에서 보 내 는 이 벤트 를 받 지 못 할 수도 있 습 니 다.
2.$bus.emit 는 mounted 에서 사용 해 야 합 니 다.created 의$bus.on 이벤트 바 인 딩 이 완 료 될 때 까지 기 다 려 야 합 니 다.
3.구독 을 발표 하 는 이 벤트 는 beforeDestory 갈고리 에서$bus.off 를 사용 하여 해제 해 야 합 니 다.구성 요소 가 삭 제 된 후에 계속 감청 할 필요 가 없습니다.
vuex
vuex 의 상태 관 리 를 통 해 구성 요소 통신 을 실현 하고 vuex 는 비교적 복잡 한 프로젝트 에 적용 되 며 빈번 한 데이터 공유 와 데이터 양 이 비교적 크다.
store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    loginState (state, isLogin) {
      state.isLogin = isLogin
    }
  }
})

export default store

App.vue:

created(){
  this.$store.commit('loginState',true)//        true
},

son.vue:

<template>
  <div>    ：<input type="button" value="  " />    :{{isLogin}}</div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "son",
  computed:{
    ...mapState(['isLogin'])
  }
};
</script>

7.localstorage
localstorage 는 브 라 우 저의 로 컬 저장 소 로 브 라 우 저 에 장기 적 으로 저 장 됩 니 다.매우 큰 데 이 터 는 이 방식 을 사용 하 는 것 을 권장 하지 않 습 니 다.
App.vue

created(){
  localStorage.setItem('isLogin', true)
},

son.vue:

computed:{
  isLogin(){
    return localStorage.getItem('isLogin')
  }
}

흔히 볼 수 있 는 구성 요소 통신 방식 은 기본적으로 이런 것 입 니 다.누락 되 거나 부족 한 것 이 있 으 면 댓 글 을 남 겨 주세요!
총결산
vue 구성 요소 간 통신 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 구성 요소 간 통신 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!