vue3父子组件数据传递_科技

创始人

2025-06-01 01:40:14

0次

1、父组件向子组件传递数据

子组件想要使用父组件的数据，代码如下

父组件的代码

如上所示Drawer是一个父组件，它向子组件传递了title和content两个数据

子组件的代码

如上所示，子组件使用defineProps可以接收父组件传递过来的数据，其中type使我们指定父组件传递过来的数据类型，default是设置默认值

子组件调用父组件的方法代码如下

父组件代码

如上所示，Drawer是一个父组件，它向子组件传递了一个eee方法

子组件代码

子组件代码

如上所示，子组件向父组件传递了两个数据username、data和一个方法getMoney

父组件的代码

如上代码所示，父组件使用子组件的时候只需要给这个子组件定义一个ref属性即可使用子组件传递过来的数据和方法了

注意：有时候我们想要在页面直接输出结果，但是在setup语法糖里面通过ref使用子组件的属性和方法需要在vue生命周期的onMounted之后使用，否则会报错

如下所示：想要在页面渲染的时候就输出数据，以下的写法会报错

上面错误的代码这样改写就没问题了，在组件挂载完毕之后再调用
需要先引入onMounted

上一篇：GDB详解