[Nuxt.js] $emit使い方

備忘録のために$emitの使い方を簡単にまとまる。

$emitの役割

$emitは子コンポーネントから親コンポーネントへの通信です。

イメージ的には子コンポーネントでイベントを定義するものです。

使い方

ボタンがクリックされ、投稿内容を親コンポーネントへ渡す例です。

// AddTodo.vue (子コンポーネント)
<template>
 <v-form>
   <v-container>
     <v-row>
       <v-col cols="12" md="4">
         <v-text-field v-model="title" :counter="10" label="todo" required></v-text-field>
       </v-col>
       <v-col cols="12" md="4">
         <v-btn @click="handleSubmit">作成</v-btn>
       </v-col>
     </v-row>
   </v-container>
 </v-form>
</template>
<script>
export default {
 data: function(){
   return {
     title: ""
   };
 },
 methods: {
   handleSubmit() {
     this.$emit("todoSubmit", this.title) // <-ここにエミットあります!
     this.title = "";
   }
 }
};
</script>

// index.vue (親コンポーネント)
<template>
 <div>
   <AddTodo @todoSubmit="addTodo" />
   <TodoList :todos="todos" />
 </div>
</template>

<script>
import AddTodo from '@/components/AddTodo';
import TodoList from '@/components/TodoList';

export default {
 components: {
   AddTodo,
   TodoList,
 },
 data: function(){
   return {
     todos: [],
   }
 },
 methods: {
   addTodo(title){
     this.todos.push({
       title,
     })
   }
 }
}
</script>

AddTodoコンポーネントタグで$emitで定義したtodoSubmitという名前を@todoSubmitのように呼び出しています。(v-on:todoSubmitでも良い)

これに反応して実行されるメソッドを定義すると、第一引数には子から渡されたデータが入ります。

この流れで子から親へのデータ通信を実現しています。

コードは以下の記事を参考にさせていただきました。

[入門]Rails API × Nuxt SPA × Firebase Authで作る Todo Appチュートリアル - Qiita

まとめ

複雑な動きなので、がんがん使って覚えましょう。