vue 구성 요소 간 통신

설명:다음은 제 가 자주 사용 하 는 vue 구성 요소 의 이전 통신 방식 을 정리 하고 최근 에 면접 을 준비 하기 때문에 일부 정 리 를 붙 여 공유 합 니 다.
props 와$emit
부자 관계 만 이 방식 을 사용 할 수 있 습 니 다.부모 구성 요 소 는 하위 구성 요소 에 매개 변 수 를 props 로 전달 하고,자식 은 부모 에 게 전달 할 때$emit 사용자 정의 이 벤트 를 촉발 합 니 다.
1.props

<!-- parent.vue,     `  ` props `  ` props,          String   ，              `:`        js             -->
<Child :name="name" :age="18" address="xxxxx"></Child>
...
data () {
 return {
  name: 'marry'
 }
}

<!--        props,            ，        v-bind -->
<blog-post v-bind="post"></blog-post>
post: {
 id: 1,
 title: 'My Journey with Vue'
}
//     
<blog-post
 v-bind:id="post.id"
 v-bind:title="post.title"
></blog-post>


<!-- child.vue -->
...
//            prop
props: ['name', 'age', 'address']

//prop  ,   prop        ，(         ) Vue             
//  ：        'String'        
props: {
 //         (`null`   `undefined`          )
 propA: Number,  
 //        
 propB: [String, Number],
 //       
 propC: {
  type: String,
  required: true
 },
 //         
 propD: {
  type: Number,
  default: 100
 },
 //         
 propE: {
  type: Object,
  //                    
  default: function () {
  return { message: 'hello' }
  }
 },
 //        
 propF: {
  validator: function (value) {
  //                 
  return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}
//     prop                 ，      property (  data、computed  )   default   validator         。

2.$emit

<!-- parent.vue -->
<Child @my-event="myEvent"></Child>
...
methods: {
 myEvent(name){
 this.name = name
 }
}

<!-- child.vue -->
<div>
 <button @click="$emit('my-event', name)"></button>
</div>
//                  

중앙 이벤트 버스
크로스 와 형제 구성 요소 의 통신 문 제 를 해결 하 는 데 사용 되 며,공공 vue 인 스 턴 스 를 교묘 하 게 사용 합 니 다.$on,$emit,$off(사용자 정의 이벤트 모니터 제거)
방법 1:
main.js 에서 Vue 의 원형 에 공공 Vue 인 스 턴 스$bus 를 마 운 트 할 수 있 습 니 다.이렇게 하면 전역 어느 곳 에서 든 사용 할 수 있 습 니 다.

Vue.prototype.$bus = new Vue()

그리고 필요 한 곳 에 사용자 정의 이벤트 와 수신 인자 의 리 셋 함 수 를 등록 합 니 다.

this.$bus.$on('changeName', name => {
 this.name = name
})

변경 이 필요 할 때 이 벤트 를 터치 하고 파 라 메 터 를 던 집 니 다.

this.$bus.$emit('changeName', 'wzj')

방법 2:
util.js 파일 정의

import Vue from 'vue'

const bus = new Vue()
export default bus

bus 가 필요 한 파일 에 도입

import bus from '../util' //       

//         
bus.$on('changeName', name => {
 this.name = name
})

//         
bus.$emit('changeName', 'wzj')

vuex
프로젝트 가 비교적 복잡 하고 다 중 구성 요소 공유 상태 에 대해 서로 다른 등급 은 통신 이 필요 하 다.

핵심 개념:
state, getter, mutation, action, module

//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export dafault new Vuex.Store({
 state: {
 name: '',
 age: 0
 },
 getters: {
 tranName(state){
  return 'name: ' + state.name
 }
 },
 mutations: {
 changeName(state, name){
  state.name = name
 }
 },
 /*Action         store              context   ，        context.commit      mutation，     context.state   context.getters     state   getters */
 actions: { //    ，        commit  mutations    state
 changeName(context, name){
  context.commit('changeName', name)
 }
 },
 modules: {}
})

구성 요소 에서 사용
방법 1:

//  state  
this.$store.state.name
//  getters  
this.$store.getters.tranName
//  mutations
this.$store.commit('changeName', 'wzj')
//  actions
this.$store.dispatch('changeName', 'wzj')

방법 2:보조 함 수 를 사용 하여 로 컬 에 매 핑 합 니 다.여기 에는 간편 한 방식 만 열거 되 어 있 습 니 다.더 많은 공식 PC 방 을 찾 아 보 세 요.

import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
//state   getters       computed   ，        
computed: {
 ...mapState(['name', 'age']),
 ...mapGetters(['tranName'])
}

//mutations   actions
methods: {
 //   `this.changeName()`     `this.$store.commit('changeName')`
 ...mapMutations(['changeName']) 
 //   `this.changeName()`     `this.$store.dispatch('changeName')`
 ...mapActions(['changeName'])
}

$attrs 와$listeners
부모 구성 요소 와 후대 구성 요소,이상 의 방법 으로 는 큰 인재 가 적 거나 첫 번 째 로 는 불편 합 니 다.

$attrs 는 부모 역할 영역 에서 prop 로 인식 되 지 않 고 가 져 오 는 attribute 바 인 딩(class 와 style 제외)을 포함 합 니 다.구성 요소 가 prop 에 대해 설명 하지 않 았 을 때 모든 부모 역할 필드 의 바 인 딩(class 와 style 제외)을 포함 하고 v-bin="$attrs"를 통 해 내부 구성 요 소 를 전송 할 수 있 습 니 다

$listeners 는 부모 역할 영역 에 있 는(native 수식 기 를 포함 하지 않 는)v-on 이벤트 모니터 를 포함 합 니 다.이것 은 v-on="$listeners"를 통 해 내부 구성 요소 인 더 높 은 차원 의 구성 요 소 를 만 들 때 매우 유용 합 니 다.

예:

//app.vue
<div>
 <One name="wzj" :age="age" address="xian" @changeAge="changeAge"></One>
</div>
...
data(){
 return {
 age: 10
 }
},
methods: {
 changeAge(age){
 this.age = age
 }
}

//one.vue
<div>
 <div>  ：{{ name }}</div>
 <div>  ：{{ age }}</div>
 <Two v-bind="$attrs" v-on="$listeners"></Two>
 <button @click="change">  2</button>
</div>
...
props: ['name', 'age'],

//two.vue
<div>
 <div>{{ address }}</div>
 <button @click="change">  2</button>
</div>
...
props: ['address'], // $attrs        ，           props
methods: {
 change(){
 this.$emit('changeAge', 30)
 }
}

이해:사실 조상 구성 요소 의 속성 과 사건 은 층 층 이 아래로 전달 되 었 습 니 다.그러나$attrs 와$listeners 로 전달 과정 에서 글 을 최적화 하고 간편 하 게 썼 습 니 다.또한 전달 하 는 과정 에서$listeners 구성 요 소 는 안의 모든 사건 을 촉발 할 수 있 습 니 다.$attrs 구성 요 소 는 이전에 props 로 설명 하지 않 았 던 나머지 속성 만 사용 할 수 있 음 을 밝 혔 습 니 다.
이상 은 vue 구성 요소 간 통신 의 상세 한 내용 입 니 다.vue 구성 요소 통신 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!