[Nuxt.js] propsの使い方

備忘録としてvue.jsのpropsの使い方を記録します。

propsの役割

propsは親から子へデータを伝える際に使用します。

使い方

// index.vue (親コンポーネント)
<template>
 <div>
   <AddTodo @submit="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>

// TodoList.vue (子コンポーネント)
<template>
 <v-card>
   <v-card-title>
     Todo List
     <v-spacer></v-spacer>
     <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
   </v-card-title>
   <v-data-table :headers="headers" :items="todos" :search="search"></v-data-table>
 </v-card>
</template>

<script>
export default {
 props: ["todos"], // <- propsです！
 data: function(){
   return {
     todos: [
       {
         title: "test",
         username: "太郎",
       }
     ],
     search: "",
     headers: [
       {
         text: "タイトル",
         align: "left",
         sortable: false,
         value: "title"
       },
       { text: "ユーザー名", value: "username" },
     ]
   };
 }
};
</script>

<style>
</style>

親コンポーネントのTodoListコンポーネントタグの属性に渡したいデータを代入してあげることで子コンポーネントへデータを渡すことができます。
非常にシンプルで簡単です！

子コンポーネント側ではscriptタグ内でprops: ['props名']とすることで受け取ることができます。

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

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

propsの細かい説明は以下の記事が詳しくわかりやすいです。(この記事の意味笑)

【Vue.js】propsを使う時は命名に注意。サンプルコード有｜たのしいWeb開発

まとめ

propsはコンポーネント指向のReact,Vue.jsなどで多用するかと思います。

しっかりと身に付けたいところです。