Vue에서 하위 구성 요소에서 상위 구성 요소로 데이터 전달

Vue에서 하위 구성 요소에서 상위 구성 요소로 데이터 전달

Vue JS를 연습하고 있는데 이벤트를 내보내는 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 방법을 알고 싶습니다.이것은 나의 부모 컴포넌트 BookList 입니다.

<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 컴포넌트의 코드입니다.이 컴포넌트에서 Book 데이터를 입력하고 'book-is-created' 및 Book 객체를 표시하는 BookList를 업데이트합니다.

<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>

book 객체를 콘솔로그하려고 하면 '정의되지 않음'이 반환됩니다.목록을 업데이트하기 위해 BookList 컴포넌트에서 Book Object를 사용할 수 있도록 하려면 어떻게 해야 합니까?

코드는 다음 파라미터로 book을 전달하고 있습니다.book-is-created이벤트가 발생하지만 핸들러가 해당 파라미터를 받아들이지 않습니다.추가만 하면 됩니다.book를 핸들러에 대한 파라미터로 지정하면 메서드 내에서 사용할 수 있습니다.

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

참고로 정의하지 마십시오.data화살표 기능이 있습니다.현재 코드는 정상이지만this데이터 기능 내,this잘못된 것을 언급할 수도 있습니다.일반적인 함수 또는 새로운 메서드 구문을 사용합니다.

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

언급URL : https://stackoverflow.com/questions/44088646/passing-data-from-child-to-parent-component-in-vue