子父组件传值or调用方法（VUE3）

子父组件传值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暴露出去之后，父组件才可以调用到子组件的方法！