JavaScript
vue.js
初心者です

JavaScript日記(親子コンポーネント間でのデータ受け渡し in Vue.js 編)

はじめに

はじめまして、Web技術一年生です。最近SPA開発について興味を持ったのでVue.js(javascriptフレームワーク)を勉強しはじめました。間違えなどがあれば、お手数ですが指摘をおねがいします。。。

Vue.jsでの親子コンポーネント間でのデータ受け渡し

親 〜〜〜> 子コンポーネントへデータを渡す時は、props
子 〜〜〜> 親コンポーネントへデータを渡す時は、$emit

使用方法 

todoリストを作って説明していきます。
親コンポーネント(App.vue)

<template>
   <div id="app">
     <todo-list v-for="item in todos" :item="item" @remove="remove"></todo-list>
   </div>
</template>
<script>
  export default{
    data(){
      return {
        todos:[
         {
            id:1,
            title:"散髪",
            date:"11-11"
         },
         {
            id:2,
            title:"買い物",
            date:"12-10"
         }
      ]
    }
  },
  methods:{
     remove(id){
        const item = this.todos.findIndex(item =>item.id ===id)
        this.todos.splice(item,1)
     }
  }
 }
</script>

todosの各データをにバインドして子コンポーネントに渡してます。

子コンポーネント(todoList.vue)

<template>
   <div class="todo-list" >
      <p>{{item.title}}</p>
      <p>{{item.date}}</p>
      <button @click="remove(item.id)">完了</button>
   </div>
</template>
<script>
  export default{
   props:{
     item:Object  
   }
  },
  methods:{
     remove(id){
        this.$emit('remove',id)
     }
  }
 }
</script>

仕組み

親コンポーネントからオブジェクト型でデータを受け取っている。
buttonをクリックイベントでメソッドremove()を発動!
子コンポーネントでのremove()の内容は、$emitでイベントをトリガして親コンポーネントに通知を送る。
そして、親コンポーネントでv-on(@remove="remove")で通知を受けとり発動。
といった仕組みになります。

注意 コンポーネントファイルのimportやcompornentsなどの記述は割愛しています。