父组件代码：FatherComponent.vue
<template>
<div class="father">
<el-button @click="updateTableData">在父组件更新数据</el-button>
<child-component :table-data.sync="tableData" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'FatherComponent',
components: {
ChildComponent
},
data() {
return {
tableData: [
{ name: '张三', age: 18, remark: '' },
{ name: '李四', age: 19, remark: '' },
{ name: '王五', age: 20, remark: '' }
] // 初始数据
};
},
watch: {
// 在父组件监听tableData，子组件tableData变化，父组件也变化
tableData: {
handler(newVal) {
console.log('FatherComponent.vue->watch tableData:', JSON.stringify(newVal))
},
deep: true // 深度监听数组或对象变化
}
},
methods: {
updateTableData() {
this.tableData.splice(0, 1);
}
},
mounted(){
console.log('FatherComponent mounted')
}
}
</script>
<style scoped></style>
子组件代码：ChildComponent.vue
<template>
<div>
<el-table :data="internalTableData">
<el-table-column label="名字" prop="name" width="160" />
<el-table-column label="年龄" prop="age" width="260">
<template slot-scope="scope">
<el-input-number v-model="scope.row.age">
</el-input-number>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" width="160">
<template slot-scope="scope">
<el-input v-model="scope.row.remark">
</el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
default: () => []
}
},
data() {
return {
internalTableData: []
};
},
watch: {
//监听tableData变化，更新internalTableData
tableData: {
handler(newVal) {
this.internalTableData = newVal
},
deep: true // 深度监听数组或对象变化
},
//监听内部数据变化，并在变化时触发update:tableData事件
internalTableData: {
handler(newVal) {
console.log('ChildComponent.vue->watch internalTableData:', JSON.stringify(this.internalTableData))
this.$emit('update:tableData', newVal);
},
deep: true // 深度监听数组或对象变化
}
},
mounted() {
console.log('ChildComponent mounted')
//在created或者mounted，tableData赋值给internalTableData
this.internalTableData = this.tableData
}
}
</script>
