[Vue] 데이터 전송 방법: props&emit, Mitt, Vuex

1. A, B는 자식이고 같은 부모가 있음
2. A- >B로 데이터를 전송
  2-1) A compenent에서 0 또는 1 버튼을 누르면 결과가 B Component 에서 표시되도록 하기

 

 

1.props&emit

A.vue

<template>
    <div>
        <button @click="buttonClick('0')">0</button>
        <button @click="buttonClick('1')">1</button>
    </div>
</template>

<!-- a에서 emit으로 parent에 보내면 b로 props -->
<script setup>
import { defineEmits } from 'vue';
import eventBus from '../eventBus'
// emit 선언
const emit=defineEmits(['oxEvent'])

// 버튼 누르면 emit 실행
const buttonClick= function(result){
    emit('oxEvent',result)
}

</script>

 

 

Parent.vue

<template>
    <!-- <p>Parent</p> -->
    <!-- <p>{{result}}</p> -->
    
    <A @ox-event="handleOxEvent"/> 
    <B :result="result"/>
    
</template>

<script setup>
    import {ref} from 'vue';
    import A from './A.vue';    
    import B from './B.vue';

    
    const result=ref('')

    const handleOxEvent = function(newResult){
        result.value=newResult;
    }


</script>

 

 

 

B.vue

<template>
{{ result }}
</template>

<script setup>

defineProps(['result'])
// defineProps({
//     result:Number
// })
</script>

 

 

 

---

2.Mitt

 

1. mitt 설치

npm install mitt

 

 

2. 이벤트버스 설정

// src/eventBus.js
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;

 

 

A.vue

<template>
    <div>
        <button @click="buttonClick('0')">0</button>
        <button @click="buttonClick('1')">1</button>
    </div>
</template>

<!-- a에서 emit으로 parent에 보내면 b로 props -->
<script setup>
import { defineEmits } from 'vue';
import eventBus from '../eventBus'
// emit 선언
// const emit=defineEmits(['oxEvent'])

// 버튼 누르면 emit 실행
const buttonClick= function(result){
    eventBus.emit('oxEvent',result)
}

</script>

 

Parent.vue

<template>
    <MittA/> 
    <MittB :result="result"/>
    
</template>

<script setup>
    import {ref, onMounted, onUnmounted} from 'vue';
    import MittA from './MittA.vue';    
    import MittB from './MittB.vue';
    import eventBus from '../eventBus';

    const result=ref('')

    const handleOxEvent = function(newResult){
        result.value=newResult;
    }

    onMounted(() => {
        eventBus.on('oxEvent', handleOxEvent);
    });

    onUnmounted(() => {
        eventBus.off('oxEvent', handleOxEvent);
    });



</script>

 

B.vue

<template>
    <div>{{ result }}</div>
</template>
    
<script setup>
    
    defineProps(['result'])
    // defineProps({
    //     result:Number
    // })
</script>

 

 

 

 

---

3. Vuex

 

1. Vuex 설치

npm install vuex@next

 

2. Vuex 저장소 설정

프로젝트 루트에 store.js 파일을 생성하고 Vuex 저장소를 설정

// src/store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      result: ''
    };
  },
  mutations: {
    setResult(state, newResult) {
      state.result = newResult;
    }
  },
  actions: {
    updateResult({ commit }, newResult) {
      commit('setResult', newResult);
    }
  },
  getters: {
    getResult(state) {
      return state.result;
    }
  }
});

export default store;

 

3. main.js

Vue 애플리케이션에 Vuex 저장소 추가

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import mitt from 'mitt'
import store from './stores/store'

const app = createApp(App)
const emitter=mitt();

app.config.globalProperties.emitter=emitter


app.use(createPinia())
app.use(router)
app.use(store);

app.mount('#app')

 

 

A.vue

<template>
    <div>
        <button @click="buttonClick('0')">0</button>
        <button @click="buttonClick('1')">1</button>
    </div>
  </template>
  
  <script setup>
  import { useStore } from 'vuex';
  
  const store = useStore();
  
  const buttonClick = (result) => {
    store.dispatch('updateResult', result);
  };
  </script>

 

Parent.vue

<template>
    <div>
      <XA /> 
      <XB :result="result" />
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useStore } from 'vuex';
  import XA from './XA.vue';
  import XB from './XB.vue';
  
  const store = useStore();
  const result = computed(() => store.getters.getResult);
  </script>

 

B.vue

<template>
    <div>{{ result }}</div>
  </template>
  
  <script setup>
  const props = defineProps({
    result: {
      type: String,
      required: true
    }
  });
  </script>