【Vue × Firebase】子コンポーネントから親コンポーネントへ$emitで渡す場合

子コンポーネントから親コンポーネントへ$emitで渡す場合

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

<input placeholder="例）アクション  恋愛  ミステリー  SF  ホラー  ミュージカル  etc.." class="search-main-item" type="search" @input="searchData($event.target.value)"/>
 <!--searchDataというカスタムイベント(今回は@input)を設定して、valueを渡す。valueを渡す際は「$event.target」が必要。-->

method:{
  searchData(value) {
      this.$emit("searchData", value);
    }
    //第一引数にメソッド名(searchData)、第二引数にデータを指定して$emitで親コンポーネントへ値を渡す。
  }
},

親コンポーネント(board.vue)

 <Post @searchData="search" />
    <!--子コンポーネントから$emitで受けたデータを関数とする。※searchに()を付けるとvalueの引数が取れないので注意。-->

search(value){

   ~~  構文 ~~

console.log(value)

}

コンソールでvalueを確認すると子コンポーネントから受けた値が受けれていることを確認出来ます。