Vue3.2 父子组件传值、方法 快速上手

本文已参与「新人创作礼」活动，一起开启掘金创作之路

在Vue3.2 中父子组件传值、方法是通过defineProps, defineEmits实现的。defineProps 和 defineEmits 都是只在 中才能使用的。 它们不需要导入就会随着 被一同处理编译。 defineProps 接收与 props 选项相同的值， defineEmits 也接收 emits 选项 相同的值。

在Vue3.2 中父组件向子组件传值，需要使用defineProps。defineProps 接收与 props 相同的值。

首先，父组件通过自定义属性向子组件传递值：

然后子组件从 vue 中引入defineProps

import { defineProps } from 'vue'

再声明接收的值const props = defineProps(['value'])

最后，就可以在子组件中使用父组件传递过来的值了

{{ props.value }}

代码示例

父组件代码：

子组件代码：

在Vue中子组件不能直接向父组件传值，子组件需要调用父组件传递过来的方法，然后再父组件中通过方法修改值。

在Vue3.2 中子组件调用父组件方法，需要使用defineEmits。defineEmits 也接收 emits 相同的值。

首先，父组件通过自定义属性向子组件传递方法：

然后子组件从 vue 中引入 defineEmits

import { defineEmits } from 'vue'

再声明接收的方法const emit = defineEmits(['func'])

最后，通过emit('父组件传递过来的方法', '向该方法传递的参数')使用方法

emit('func', 'hello world')

代码示例

父组件代码：

子组件代码：