子组件:
<template>
<div>我是子组件</div>
</template>
<script setup>
//接收父组件传值
const props = defineProps({
editData: {
type: Object,
},
//子组件怎么监听defineProps接收的父组件的editData的值的变化????
});
</script>
父组件:
<template>
<el-table
:data="data.tableData"
size="small"
style="width: 100%"
>
<el-table-column label="名称" align="center">
<template #default="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="年龄" align="center">
<template #default="scope">
<span>{{ scope.row.age}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="200" align="center">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)" class="buttonMargin">
<i class="el-icon-edit"></i>编辑</el-button
>
</template>
</el-table-column>
</el-table>
<child :editData="data.editData"></child>
</template>
<script setup>
import { reactive } from 'vue'
import childfrom '@/components/child.vue'
const data=reactive({
tableData:[
{name:"张三",age:15},
{name:"李四",age:16},
{name:"王五",age:17},
],
editData:{}
})
const handleEdit = (row) => {
data.editData=row
}
</script>