子コンポーネントからのクリックイベントなどから親コンポーネントのイベント(トリガー)を発火させるためには、子から親への値渡しと同様に、emit upによって行えば良い。子からthis.$emit()で送って、親は子コンポーネントタグとか<forms>タグとかで受け取る。

今回は、値もなく、ただ親のイベントを発動させたい際のシンプルな書き方を忘れやすいので、メモ

子コンポーネント

<!-- child.vue -->
<template>
   <button class="button" @click="add">追加する</button>
</template>
<script>
   export default {
       methods: {
           add(){
               this.$emit('add');
           }
       }
   }
</script>

親コンポーネント

<!-- parent.vue -->
<template>
   <!-- 下記は子コンポーネントタグの書き方に置き換え可能 -->
   <forms @add="addProduct"></forms>
</template>
<script>        
   export default {
       methods: {
           addProduct(){
               console.log("piyo");
           }
       }
   }
</script>  

引用：