ALBERT SITE

1. mitt 설치(mitt은 외부라이브러리이므로 별도 설치필요)

>npm install --save mitt

2. main.js(다른 js파일 작성해도 무관) emitter등록

Vue의 globalProperties로 emitter를 등록

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
 
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter
app.mount(''app')
 
//이렇게 사용불가
// const emitter = mitt();
// createApp(App).config.globalProperties.emitter = emitter
// createApp(App).mount(''app')

3. 이벤트 보내기 

<script>
export default{
  methods:{
  	enterKeyFunction(){
    	this.emitter.emit('addTodoInput', this.todoInput)
    	this.todoInput = '';
    }
  }
}
</script>

TodoInput.vue 전체소스

<!-- 할 일 입력 -->
<template>
    <div class="todoapp">
      <h1>TODOS</h1>
      <input
        id="new-todo-title"
        class="new-todo"
        placeholder="할일을 추가해주세요"
        autofocus
        @keyup.enter="enterKeyFunction"
        v-model="todoInput"
      />
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            todoInput :'',
        }
    },
    methods:{
        enterKeyFunction(){
            this.emitter.emit('addTodoInput', this.todoInput)
            this.todoInput = '';
        }
    }
}
</script>

4. 이벤트 받기

<script>
export default{
    mounted(){
        this.emitter.on('addTodoInput',this.addTodoInputFunction)
    },
}
</script>

TodoList.vue 전체소스

<template>
   <div class="todoapp">
      <ul id="todo-list" class="todo-list" v-if="showTodoList"> 
          <li v-for="(list, index) in dynamicLists[0]" :key="index">
            <div class="view">
            <label class="label">{{list.item}}</label>
            </div>
            <input class="edit" value="새로운 타이틀" />
        </li>
      </ul>
    </div>
</template>
 
<script>
export default {
    data(){
        return {
            dynamicLists:[{}],
            now:"0000년00월00일00시00분00초", //입력시간세팅
        }
    },
    created(){
        let totCnt = 0;
        this.localStorageLength = localStorage.length
        for(let i=0; i<this.localStorageLength; i++){
            if(localStorage.key(i).indexOf('loglevel:') === -1){
             this.dynamicLists[0][localStorage.key(i)] = JSON.parse(localStorage.getItem(localStorage.key(i)));
             if( this.dynamicLists[0][localStorage.key(i)].completed){
                 this.isCompletedArr[localStorage.key(i)] = true;
             }
             totCnt++;
            }
        }
        this.totalCount = totCnt;
    },
    mounted(){
        this.emitter.on('addTodoInput',this.addTodoInputFunction)
    },
    methods:{
        getCurrTime(){
         let date = new Date();
         this.now = `${date.getFullYear()}년 ${date.getMonth()+1}월 ${date.getDate()}일 ${date.getHours()}시 ${date.getMinutes()}분 ${date.getSeconds()}초 `;
        },
        addTodoInputFunction(todoInput){
            this.getCurrTime();
            if(todoInput.trim()!=="" && !localStorage.getItem(todoInput) ){
            let value ={
                        item:todoInput
                        ,completed:false
                        ,time:this.now
            };
             localStorage.setItem(todoInput,JSON.stringify(value));
             this.dynamicLists[0][todoInput] = JSON.parse(localStorage.getItem(todoInput));
            }
        },
  }
  </script>

원글주소: https://zincod.tistory.com/237