素材编辑 | 宋大狮
排版运营 | 小唐狮
ONE 问题描述
今天要和大家分享的是关于vue的问题，主要是在vue3中如何实现父子传参，以帮助大家在vue3项目中，能够像vue2中那样，清晰快速掌握上手。
需求： 以一种清晰的方式，描述在vue3中实现父子传参的方式。
问题： vue3中实现父子传参的方式。
TWO 实现方式
实现一：父传子
描述： 像vue2中父传子那样，父组件通过自定义属性发送，子组件通过props接收。不过vue3中不同的是，父组件中引入子组件后，不需要注册可直接使用，子组件中通过defineProps方法接收。
示例：
父组件：
<Child :num = "num"></Child>
import Child from "./xxx.vue"
不需要注册
子组件：
defineProps({
num: {
type: Number,
default: 30
}
})
实现二：子传父
描述： 像vue2中子传父那样，子组件通过emit发送，父组件通过自定义事件接收。不过vue3中不同的是，父组件中引入子组件后，不需要注册可直接使用，子组件中通过defineEmits方法发送。
示例：
父组件：
<Child @fn = "chanNum"></Child>
import Child from "./xxx.vue"
不需要注册
const chanNum = () => {}
子组件：
// 子传父时需要先定义好emit方法
const emit = defineEmits<{
(event: 'fn',n:number):void
}>()
const click = () => {
// 触发事件
emit("fn",n)
}
实现三：v-model实现父子间互传
描述： 谈起v-model，我们会立马想到数据双向绑定，但在vue3中，v-model拥有了新的妙用。在vue3中，父组件通过v-model可直接实现父子传参，不需要自定义属性、自定义事件，而子组件中的操作仍同上面所述。
示例：
父组件：
<Child v-model:num = "num"></Child>
import Child from "./xxx.vue"
不需要注册
子组件：
let props = defineProps({
num: {
type: Number,
default: 30
}
})
// 获取props中属性的方式
let n = props.num
// 子传父时需要先定义好emit方法
const emit = defineEmits<{
(event: 'update:num',n:number):void
}>()
const click = () => {
n++
// emit(上面的event的值，要修改成的值)
emit("update:num",n)
}
THREE 知识总结
总结一： 问题复盘
vue3中，父组件中引入子组件后，不需要注册可直接使用。父传子时，子组件中通过defineProps方法接收，子传父时，子组件中通过defineEmits方法发送。
总结二： vue2父子传参方式盘点
父传子
1、props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收
2、$parent：直接访问父组件实例的属性和方法
3、$attrs：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过$attrs进行接收【与props不能共存】【vue新增的祖孙传参方式】
4、插槽
子传父
1、自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据
2、$refs：直接访问子组件实例的属性和方法
3、$children 直接访问子组件实例的属性和方法【返回数组，必须遍历赋值后才能渲染】
FOUR 集思广益
欢迎大家对本问题留言或私信指教，一起学习提高！
- END -
ABOUT 关于作者
- 宋大狮 | 执着于理想，纯粹与当下
- 小唐狮 | 广场舞大军中最靓的仔
