[Vue] 원하는 컴포넌트에 데이터 전송 mitt

FilterBox.vue 의 데이터를
Container.vue 를 넘어
App.vue로 전송하기

mitt

mitt라는 라이브러리를 사용하면 원하는 컴포넌트로 데이터를 보내줄 수 있다.
부모 컴포넌트 뿐 아니래 형제 컴포넌트에게도 보낼 수 있다.

1. 설치

npm install mitt
// or
sudo npm install mitt
// or
yarn add mitt

2. mitt 라이브러리 셋팅

(main.js)

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

let emitter = mitt();
let app = createApp(App)
app.config.globalProperties.emitter = emitter;  // global value

app.mount('#app')

3. mitt로 데이터 전송

데이터를 보낼 컴포넌트에서 this.emitter.emit()

(FilterBox.vue)

...
<button type="button" @click="mittEvent">버튼</button>
...

...

  methods: {
    mittEvent(){
      this.emitter.emit('이벤트명작명', '데이터');
    }
  },
...

4. mitt 데이터 수신

데이터를 받을 컴포넌트에서 this.emitter.on()

(App.vue)

...
  mounted(){
    this.emitter.on('이벤트명작명', (a)=>{
      console.log(a);
    });
  }
...

보내고 받을 데이터가 많아지면 데이터 관리가 힘들기 때문에 Vuex를 많이 쓴다.

@숙제

(FilterBox.vue)

<template>
  <div @click="mittEvent">
    <div class="filter-item" :class="`${filter}`" :style="{ backgroundImage : `url(${uploadImage})` }"></div>
    <p class="filter-name"><slot></slot></p>
  </div>
</template>

...
  methods: {
    mittEvent(){
      this.emitter.emit('FilterName', this.filter);
    }
  },
...

(App.vue)

...
  mounted(){
    this.emitter.on('FilterName', (a)=>{
      this.SelectFilter = a;
      console.log(this.SelectFilter);
    });
  }
...


// 데이터에 SelectFilter 추가
...
  data(){
    return {
      post : post,
      get: 0,
      tab: 0,
      uploadImage: '',
      uploadText: '',
      SelectFilter: '',
    }
  },
...


// publish 메소드에 filter 항목 수정
...
  methods: {
    publish(){
      const newPost = {
        name: "aluvy",
        userImage: "./img/profile1.jpg",
        postImage: this.uploadImage,
        likes: 0,
        date: "May 15",
        liked: false,
        content: this.uploadText,
        filter: this.SelectFilter,
      };
      this.post.unshift(newPost);
      this.tab = 0;
    },
  }
...


// container 컴포넌트에 SelectFilter props 전송
...
<Container :post="post" :tab="tab" :SelectFilter="SelectFilter" :uploadImage="uploadImage" @write=" n => uploadText = n " />
...

Container.vue 컴포넌트에서 SelectFilter props 받아서 class로 넣어주기

(Container.vue)
...
  <div v-if="tab==1">
    <div class="filter">
        <div class="upload-image" :class="`${SelectFilter}`" :style="{ backgroundImage : `url(${uploadImage})` }"></div>
        <div class="filters">
          <ul>
              <li class="filter-1" v-for="(a,i) in filter" :key="i">
                <FilterBox :uploadImage="uploadImage" :filter="a">{{ a }}</FilterBox>
              </li>
          </ul>
        </div>
    </div>
  </div>
  
  <div v-if="tab==2">
    <div class="writer">
        <div class="upload-image" :class="`${SelectFilter}`" :style="{ backgroundImage : `url(${uploadImage})` }"></div>
        <div class="write">
            <textarea class="write-box" @input="sendText">write!</textarea>
        </div>
    </div>
  </div>
...


...
  props: {
    post: Object,
    tab: Number,
    uploadImage: String,
    SelectFilter: String,
  },
...