父子组件如何传递参数或者是从当前组件如何向另一个组件传递参数,在这里我们使用props属性。
//父组件点击编辑按钮将跳转到编辑弹窗,同时需要将获取到的数据传入
<a-table :columns="columns" :data-source="dataSource" bordered >
<template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'operation'">
<a-button type="link" @click="openDialog({ formData: record, status: 'edit' })">编辑</a-button>
</template>
</template>
</a-table>
//javascript
//打开编辑弹窗--EditModel编辑组件
const openDialog = function (props) {
$dialog(EditModel, { ...props }).then((returnData) => {
if (typeof returnData !== 'undefined') refreshData() //refreshData() 查询列表
})
};
//子组件进行定义
const props = defineProps({
_close: Function,// 关闭dialog的方法,自动注入的
status: String,
formData: {
type: Object,
default: {}
},
});
console.log(props.status);
//一般穿过来的组件是“只读”的,可以重新定义赋值
const formData = reative(props.formdata)