언어/WEB

Vue - $emit 쓰는 법

앨리스.W 2023. 9. 29. 13:22

1.이벤트에 바로 쓰기

<template>
    <button @click="$emit('delete', id)">Delete</button>
</template>
<script>
export default {
  emits: ['delete'],
  // emits: {
  //   'toggle-favorite': function(id) {
  //     if (id) {
  //       return true;
  //     } else {
  //       console.warn('Id is missing!');
  //       return false;
  //     }
  //   } 
  // },
  </script>

2.메소드 안 객체로 쓰기

<template>  
    <button @click="toggleFavorite">Toggle Favorite</button>
</template>

<script>
export default {
  emits: ['toggle-favorite'],
  methods: {
    toggleFavorite() {
      this.$emit('toggle-favorite', this.id);
    }
  },
};
</script>
반응형