[Vue.js] 버튼과 이벤트 연결하기

우선 HelloWorld.vue의 Template에 input=text와 button을 추가해준다.

<template>
  <div class="hello">
    <h1>{{ msgTitle }}</h1>
    <input type="text" v-model="todoItem">
    <button v-on:click="addTodo">  문자열 추가</button>
    
  </div>
</template>

 

 

이후 script에 이 input값을 받는 data와, 이 값을 보낼 이벤트를 만들어준다.

여기서 포인트는 this$emit('이벤트명', 보낼 데이터) 이렇게 쓰인 것이다.

<script>
export default {
  name: 'HelloWorld',
  props: ['msgTitle'],
  data() {
    return {
      todoItem:''
    }
  },
  methods: {
    addTodo(){
      if (this.todoItem !== ''){
        console.log(this.todoItem);
        this.$emit('addItemEvent', this.todoItem);
        this.todoItem= '';
      }

    }
  },
}
</script>

 

 

이후 받는쪽(App.vue)로 가서 li태그로 리스트항목들을 추가해준다. 

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg-title="message" @addItemEvent="addTodoItem" />
    <ul>
      <li v-for="(todo,idx) in todoItems" :key="idx">
        {{todo}}
      </li>
    </ul>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      message: '부모 컴포넌트가 보낸 메시지',
      todoItems: ['첫번째문자열','두번째문자열']
    }
  },
  methods: {
    addTodoItem(todoItem) {
      this.todoItems.push(todoItem);
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>