子父组件传值or调用方法
一、父组件调用子组件的方法
1.代码说明
父组件:
//框架vue3-小诺的S-table
<s-table
ref="platformTable"
:columns="platformColumns"
:data="platformLoadData"
:row-key="(record) => record.id"
:scroll="{ x: 1500 }"
:tool-config="toolConfig"
bordered
>
<template #operator>
<a-space>
<a-button style="margin-top: 8px" type="primary" @click="platformAddForm.onOpen()">
<template #icon>
<plus-outlined/>
</template>
添加平台
</a-button>
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'action'">
<!-- <a-button type="link" @click="editAssets(record)"-->
<a-button type="link"
@click="platformAddForm.onOpen(record)">
<EditOutlined/>
编辑
</a-button>
<a-button type="link" @click="deletePlatformLoad(record)">
<DeleteOutlined/>
删除
</a-button>
</template>
</template>
</s-table>
//父组件调用子组件方法:
<platform-add-form ref="platformAddForm" @successful="platformTable.refresh(true)"/>
//js:
import PlatformAddForm from "@/views/project/platformAddForm.vue";
let platformAddForm = ref(null)
2.图示
子组件做成了抽屉
当点击父组件的添加平台
或者编辑
时,可以直接调用子组件的方法。
当子组件完成调用,想要保存时,会给父组件发送emit('successful')
表示保存已完成,此时父组件可以通过@successful="platformTable.refresh(true)"
调用refresh
方法事项表格刷新。
3.重点注意
子组件:
子组件仍然可以通过emit('successful')
向父组件发送信息,
但如果要实现父组件可以调用子组件方法
这个功能时,需要将子组件的方法暴露出去!!!必须暴露,不然父组件获取不到方法,就会报错!
// 打开抽屉
const onOpen = (record) => {
visible = true
if (record) {
//编辑
} else {
//添加
formData.value = {}
}
}
// 关闭抽屉
const onClose = () => {
visible = false
}
// 验证并提交数据
const onSubmit = () => {
...
//成功后
onClose()
emit('successful')
}
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
onOpen
})
只有defineExpose
暴露出去之后,父组件才可以调用到子组件的方法!