Vue 구성 요소 간 데이터 전달 방식(3가지)

vue에서 데이터를 전달하는 방식은 어떤 것들이 있습니까?

데이터 흐름의 방식으로 데이터를 전달하다

props를 통해 속성 전달
데모2 구성 요소에 msg 데이터 연결
상위 어셈블리

<template>
 <div class='container'>
 <demo2 :msg="msg" @change="change" />
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data(){
 return {
  msg:' '
 }
 },
 methods:{
 change(value){
  this.msg = value
 }
 },
 components: {
 demo2
 }
}
</script>

하위 구성 요소는props를 정의하여 msg를 사용하고 $emit는 외부의 함수를 터치하여 상위 전송된 값을 변경합니다
서브어셈블리

<template>
 <div class='container'>
 {{msg}}
 <button @click="change"> </button>
 </div>
</template>

<script>
export default {
 props:['msg'],
 methods:{
 change(){
  this.$emit('change',' ')
 }
 }
}
</script>

$attrs를 통해 속성 수집
$attrs는 구성 요소에 연결된 속성을 수집합니다.class와style은 처리하지 않습니다.만약props와 함께 사용한다면,props의 우선순위는attrs보다 높다
상위 어셈블리

<template>
 <div class="container">
 <demo2 class="demo" style="color:red" :msg="msg" />
 </div>
</template>

<script>
import demo2 from "./demo2";
export default {
 data() {
 return {
  msg: " "
 };
 },
 components: {
 demo2
 }
};
</script>

서브어셈블리에서this.$attrs는 구성 요소에 연결된 속성을 수집합니다
서브어셈블리

<template>
 <div class="container">{{$attrs.msg}} </div>
</template>

<script>
export default {
 // inheritAttrs:true,
 //  
 // props:['msg'],
 //  props $attrs ， props， msg data ， $attrs msg
 created(){
 console.log(this.$attrs)
 //  msg 
 }
};
</script>

$listeners를 통해 수집 방법
$listeners는 구성 요소에 연결된 방법을 수집합니다.상위 어셈블리의 값을 실수로 전달할 수 있습니다.
상위 어셈블리

<template>
 <div class='container'>
 {{msg}}
 <demo2 class="demo" style="color:red" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: ' '
 }
 },
 methods: {
 change(newvalue){
  this.msg = newvalue;
 }
 },
 components: {
 demo2
 }
}
</script>

서브어셈블리에서this.$listeners는 구성 요소에 연결된 방법을 수집합니다.this.$를 통해listeners.상위 구성 요소 데이터의 값을 수정하기 위해 XXX () 를 직접 호출할 수 있습니다.
서브어셈블리

<template>
 <div class="container">
 <button @click="change"> </button>
 </div>

</template>

<script>
export default {
 // inheritAttrs:true,
 created(){
 console.log(this)
 },
 methods:{
 change(){
  // this.$emit('msgChange')
  // this.$parent.change()
  //  $emit ，$parent 

  this.$listeners.msgChange(' ')

 }
 }
};
</script>

provide를 통해 의존을 제공하고, inject 주입 의존을 통해 데이터의 다단계 서브어셈블리 전달을 실현합니다.
부모 레벨의provide에 의존 대상을 제공하여 하위 구성 요소가 이 대상에 접근할 수 있도록 합니다
“
provide와 inject 연결은 응답할 수 있는 것이 아닙니다.이것은 애써 한 것이다.그러나, 만약 당신이 감청 가능한 대상에 전송된다면, 그 대상의property는 응답할 수 있습니다.
”
사실provide와inject 귀속 자체는 별도의 일(데이터 귀속 등)을 하지 않고 제공된 데이터를 하위 구성 요소에 노출시킨다는 것이다.그러면 노출된 데이터가 상응하는지 여부는 데이터 자체에 달려 있다
상위 어셈블리

<template>
 <div class='container'>
 <demo2 class="demo" style="color:red" :msg="msg" @msgChange="change"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 provide(){
 return {
  msg:this.msg,
  msgChange:this.change,
  //  this 。
  // this vue ， 
  app:this
 }
 },
 data () {
 return {
  msg: ' '
 }
 },
 methods: {
 change(){
  this.msg += 1;
 }
 },
 components: {
 demo2
 }
}
</script>

후손의 하위 구성 요소는reject를 통해 상응하는 의존을 주입할 수 있다
서브어셈블리

<template>
 <div class="container">
 <!--  msg  -->
 <div>{{msg}} </div>
 <!-- msg ， vue  -->
 <div>{{app.$data.msg}}</div>
 <button @click="msgChange"> </button>
 </div>
</template>

<script>
export default {
 inject:['msg','msgChange','app']
};
</script>

구성 요소 실례에 직접 접근하여 데이터를 얻다

ref를 통해 구성 요소 실례 가져오기
ref 속성 정의는 구성 요소에서 가져온 vue 실례이며, 원본 탭에서 가져온 것은 대응하는dom
마운트 후에 $refs의 내용을 받을 수 있습니다
상위 어셈블리

<template>
 <div class='container'>
 {{msg}}
 <demo2 ref="test"/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: ''
 }
 },
 //  $refs 。
 //  
 mounted(){
 this.msg = this.$refs.test.msg
 },
 components: {
 demo2
 }
}
</script>

서브어셈블리

<script>
export default {
 data(){
 return {
  msg:' '
 }
 }
}
</script>

\$parent/$children을 통해 구성 요소 인스턴스 가져오기
같은 것도 mounted 이후에야 대응하는 실례를 얻을 수 있습니다.
여기는 부모 구성 요소가 하위 구성 요소의 msg를 보여 주고, 하위 구성 요소가 부모 구성 요소의 msg를 보여 줍니다.
상위 어셈블리에서 $children을 통해 하위 어셈블리 인스턴스 가져오기
상위 어셈블리

<template>
 <div class='container'>
 {{msg}}
 <demo2/>
 </div>
</template>

<script>
import demo2 from './demo2'
export default {
 data () {
 return {
  msg: '',
  fatherMsg:" "
 }
 },
 mounted(){
 console.log(this.$children)
 // sonMsg，$children 
 this.msg = this.$children[0].sonMsg;
 },
 components: {
 demo2
 }
}
</script>

하위 구성 요소 $paren을 통해 상위 구성 요소 인스턴스 가져오기
서브어셈블리

<template>
 <div class='container'>
 {{msg}}
 </div>
</template>

<script>
export default {
 data () {
 return {
  msg:'',
  sonMsg: ' '
 }
 },
 mounted(){
 // fatherMsg
 this.msg = this.$parent.fatherMsg;
 }
}
</script>

공공 창고 공유 데이터 정의

eventBus 공유 데이터 정의
Vue 원형에 $bus를 추가하면 새로운 vue 대상입니다. 전역적인 vue 실례에서 $bus를 통해 이 vue 대상을 얻을 수 있습니다. 이 대상의 속성과 방법을 얻을 수 있습니다.
메인js에서 정의

Vue.prototype.$bus = new Vue({
 data:{
 a:1,
 b:2
 },
 methods:{
 log(){
  console.log(this.a)
 }
 }
})

$bus에 정의된 속성과 방법을 글로벌 Vue 인스턴스에서 확인할 수 있습니다.
Vuex를 통한 데이터 공유
정부에서 제시한 다중 구성 요소로 데이터를 전달하는 해결 방안
store index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 test:'123123123',
 test2:'123123123',
 },
 mutations: {
 changeTest(state,payload){
  console.log(state,payload)
  state.test = payload.value
 },
 changeTest2(state,payload){
  console.log(state,payload)
  state.test2 = payload.value
 }
 },
 actions: {
 asyncChageTest({commit},payload){
  setTimeout( ()=>{
  commit('changeTest2',payload)
  },2000)
 }
 },
 modules: {
 }
})

어셈블리에서 사용

<template>
 <div class='container'>
 {{this.$store.state.test}}
 {{test}}
 {{this.$store.state.test2}}
 {{test2}}
 <button @click="change"> </button>
 <button @click="asyncChange"> </button>
 </div>
</template>

<script>
//  mapState state 
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
 data(){
 return {
  msg:' '
 }
 },
 computed:{
 ...mapState(['test','test2'])
 }, 
 methods:{
 //  
 ...mapMutations(['changeTest']),
 ...mapActions(['asyncChageTest']),
 change(){
  //  state 
  this.$store.commit('changeTest',{value:' test '});
  // this.changeTest({value:' '})
 },
 asyncChange(){
  //  state 
  this.$store.dispatch('asyncChageTest',{value:' test2 '})
  // this.asyncChageTest({value:' test2 '})
 }
 },
}
</script>

이상은 Vue에서 구성 요소 간의 데이터 전달 방식에 대해 정리한 것이다. 일상적인 개발에서 사용하는 장면에 따라 적당한 방식으로 데이터의 전달을 해야 한다.
Vue 구성 요소 간의 데이터 전달 방식(3가지)에 대한 이 글을 소개합니다. 더 많은 Vue 구성 요소 간의 데이터 전달 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!