前言

最近在想做个cloud项目,gitee上找了个模板项目，前端使用到vue3 + typeScript，最近使用到vue3 的父子组件之间的传值，顺便学习一下，在此总结一下，若有不足之处，望大佬们可以指出。

vue3官网：https://cn.vuejs.org/

一、父向子组件传值

父组件传递参数

子组件接收参数

defineEmits： defineEmits() 宏仅限于 setup 语法糖 使用，用来声明组件要触发的事件。

父组件小优化

官方文档：https://cn.vuejs.org/guide/components/props.html#prop-passing-details

这实际上等价于：

实现效果

二、子向父组件传值

子组件传递参数

父组件接收参数

实现效果

三、 defineExpose 方式（常用）

概述： 这是我在 clone 项目模板中看到的使用方式，也属于最常用的方式。

父向组件传值

子组件接收值

实现效果

父组件输入 lanys

点击完成

这么设计的好处是什么？

从项目中能看出新增和更新功能可以做到通用，节省开发时间及成本。项目中是这么设计的，

在子组件 init(初始化中)

const init = (id?: number) => {
	// id 存在则为修改
	if (id) {
		getUser(id)
	}
   // 获取下面的列表数据 可以忽略
	getOrgList()
	// 忽略
	getPostList()
	// 忽略
	getRoleList()
}
// 暴露组件
defineExpose({
	init
})

新增模块(不需要传id)

更新模块(传id)