Vue内の子コンポーネントから親コンポーネントへのデータの受け渡し

Question

私はVue JSを実践しており、子コンポーネントからイベントを発生させる親コンポーネントにデータを渡す方法を理解したいと思います。 これは私の親コンポーネントブックリストです：

：

<template> 
    <div class="booklist"> 
    <BookForm @book-is-created="onClickForm" /> 
    <table v-for="book in books"> 
     <tr> 
     <th> Author </th> 
     <th> Title </th> 
     <th> Publishing House </th> 
     <th> Edition Date </th> 
     </tr> 
     <tr> 
     <td> {{ book.author}}</td> 
     <td> {{ book.title}}</td> 
     <td> {{ book.publishing_house}}</td> 
     <td> {{ book.edition_date}}</td> 
     </tr> 
    </table> 
    </div> 
</template> 
<script> 
import BookForm from './BookForm'; 
export default { 
    name: 'hello', 
    data:() => ({ 
    books: [] 
    }), 
    mounted() { 
     axios.get("http://localhost:3000/api/v1/books") 
     .then(response => {this.books = response.data}) 
    }, 
    components:{ 
     BookForm 
    }, 
    methods:{ 
     onClickForm(){ 
     console.log(this.book) 
     console.log('Book created') 
     } 
    } 
    } 
</script> 

は、ここで私は書籍データを入力し、「ブック作成され」とブックオブジェクトを発光ブックリストを更新することになるから、私のBookFormコンポーネントのコードです

<template lang="html"> 
    <form> 
     <label for="author">Author</label> 
     <input v-model="book.author"type="text" name="author" value=""> 
     <br> 
     <label for="title">Title</label> 
     <input v-model="book.title" type="text" name="title" value=""> 
     <br> 
     <label for="publishing_house">Publishing house</label> 
     <input v-model="book.publishing_house" type="text" name="publishing_house" value=""> 
     <br> 
     <label for="edition_date">Edition Date</label> 
     <input v-model="book.edition_date" type="text" name="edition_date" value=""> 
     <br> 
     <button v-on:click.prevent="createBook" >createBook</button> 
    </form> 
</template> 

<script> 
export default { 
    data:() =>({ 
    book:{ 
     author:"", 
     title:"", 
     publishing_house: "", 
     edition_date: "" 
    } 
    }), 
    methods:{ 
    createBook: function() { 
     //console.log(this.book) 
     this.$emit('book-is-created', this.book) 
    } 
} 
} 
</script> 

ブックオブジェクトのログを記録しようとすると、「未定義」が返されます。リストを更新するには、BookListコンポーネント内のブックオブジェクトを使用可能にするにはどうすればよいですか？

Answer 1

コードはbook-is-createdイベントのパラメータとしてbookを渡していますが、ハンドラがそのパラメータを受け付けていません。必要なのは、bookをパラメータとしてハンドラに追加するだけで、メソッド内で使用することができます。

methods:{ 
    onClickForm(book){ 
    console.log(book) 
    console.log('Book created') 
    // this.books.push(book) 
    } 
} 

矢印機能付きでdataを定義しないでください。現在のコードはOKですが、thisをデータ関数内で使用しようとすると、thisは間違ったものを参照します。典型的な関数または新しいメソッド構文を使用してください。

data(){ 
    return { 
     book:{ 
     author:"", 
     title:"", 
     publishing_house: "", 
     edition_date: "" 
     } 
    } 
}