vue2子传父,点击保存,父中的el-table直接显示值,请写出相关代码
时间: 2024-01-01 12:03:19 浏览: 30
假设子组件中有一个表单,用户填写完表单后点击保存按钮,要将表单数据传递给父组件并更新父组件中的表格显示,可以按照以下步骤实现:
1. 子组件中定义一个 save 方法,在该方法中将表单数据通过 $emit 发送给父组件:
```javascript
// 子组件
<template>
<div>
<el-form ref="form" :model="formData">
<!-- 表单控件 -->
</el-form>
<el-button @click="save">保存</el-button>
</div>
</template>
<script>
export default {
data() {
return {
formData: {} // 表单数据
}
},
methods: {
save() {
// 获取表单数据
const formData = this.$refs.form.model
// 发送数据给父组件
this.$emit('save', formData)
}
}
}
</script>
```
2. 父组件中定义一个表格,将子组件中的数据传递给它:
```javascript
// 父组件
<template>
<div>
<el-table :data="tableData">
<!-- 表格列 -->
</el-table>
<child-component @save="handleSave"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
tableData: [] // 表格数据
}
},
methods: {
handleSave(formData) {
// 将表单数据添加到表格数据中
this.tableData.push(formData)
}
}
}
</script>
```
当用户在子组件中填写完表单后,点击保存按钮,子组件会将表单数据通过 $emit 发送给父组件,父组件的 handleSave 方法会将数据添加到表格数据中,并自动更新表格显示。