在Vue中将数据从子组件传递到父组件 [英] passing data from child to parent component in Vue
问题描述
我正在练习 Vue JS，并想了解如何将数据从子组件传递到发出事件的父组件.这是我的父组件 BookList:
<div class="booklist"><BookForm @book-is-created="onClickForm"/><table v-for="书本"><tr><th>作者<th>标题</th><th>出版社</th><th>版本日期 </th></tr><tr><td>{{ book.author}}</td><td>{{ book.title}}</td><td>{{ book.publishing_house}}</td><td>{{ book.edition_date}}</td></tr></模板><脚本>从'./BookForm'导入BookForm；导出默认{name: '你好',数据:() =>({书籍:[]}),安装(){axios.get("http://localhost:3000/api/v1/books").then(response => {this.books = response.data})},成分:{书单},方法:{onClickForm(){控制台日志(这本书)console.log('书已创建')}}}
这是我的 BookForm 组件的代码，我将从中输入书籍数据并更新发出book-is-created"和 book 对象的 BookList:
<表格><label for="author">作者</label><input v-model="book.author"type="text" name="author" value=""><br><label for="title">标题</label><input v-model="book.title" type="text" name="title" value=""><br><label for="publishing_house">出版社</label><input v-model="book.publishing_house" type="text" name="publishing_house" value=""><br><label for="edition_date">版本日期</label><input v-model="book.edition_date" type="text" name="edition_date" value=""><br><button v-on:click.prevent="createBook" >createBook</button></表单></模板><脚本>导出默认{数据:() =>({书:{作者:""，标题:""，出版社:"",版本日期:"}}),方法:{创建书:函数(){//console.log(this.book)this.$emit('book-is-created', this.book)}}}当尝试控制台记录书对象时，它返回未定义".如何使 BookList 组件中的 book 对象可用以更新我的列表?
代码将 book 作为参数传递给 book-is-created 事件，但您的处理程序不接受该参数.您需要做的就是将 book 作为参数添加到您的处理程序中，您就可以在方法中使用它.
方法:{onClickForm(书){控制台日志(书)console.log('书已创建')//this.books.push(book)}}作为旁注，避免使用箭头函数定义 data.您当前的代码没问题，但是如果您曾尝试在数据函数中使用 this，this 将引用错误的内容.只需使用典型函数或新方法语法即可.
data(){返回 {书:{作者:""，标题:""，出版社:"",版本日期:"}}}I am practicing Vue JS and would like to understand how to pass data from a child component to a parent component emitting an event. This is my parent component 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>
Here's the code of my BookForm component from which I would enter the book data and update the BookList emitting the 'book-is-created' and the book object:
<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>
When try to console log the book object it returns 'undefined'. How can I make available the book object in the BookList component in order to update my list?
The code is passing book as a parameter for the book-is-created event, but your handler is not accepting that parameter. All you need to do is add book as a parameter to your handler and you will be able to use it inside the method.
methods:{
onClickForm(book){
console.log(book)
console.log('Book created')
// this.books.push(book)
}
}
As a side note, avoid defining data with arrow functions. Your current code is ok, but if you ever tried to use this inside your data function, this would refer to the wrong thing. Just use a typical function or the new method syntax.
data(){
return {
book:{
author:"",
title:"",
publishing_house: "",
edition_date: ""
}
}
}
这篇关于在Vue中将数据从子组件传递到父组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
