vue3中,子组件如何向父组件传值

写作灵感

最近在写项目时,有多个页面都需要使用到一个搜索栏。因此,就需要将搜索栏封装成一个组件,我们在其他组件使用搜索组件时,需要将搜索到的内容传入父组件进行展示。此时,就需要用到子组件向父组件传值了。

使用子组件向父组件传递值时,相信遇到最多的便是emit进行传值了。下面我将介绍我用到的两种传值方式:使用setup语法糖和不使用setup语法糖的两种方式。(父组件的书写放在后面

使用setup语法糖

首先,先向大家简单了解一下setup语法糖。总所周知,如果不使用setup语法糖,我们需要自己手动返回一些变量与函数。setup则是简化这一过程的,大家可以对比一下我下面不使用setup语法糖时是如何的。

说完了setup语法糖,接下来向大家介绍一下这段代码。在这段代码里面定义了一个emit,其内只包含了一个向父组件传递值的方法。具体的传递值的过程如下:

1、点击子组件的搜索按钮触发搜索事件

2、获得结果,并通过子组件向父组件传值的方法将值传递给父组件

3、父组件在监听到子组件传递了值以后,触发父组件内相应的方法

从上不难看出,在子组件其实触发了两件事情。一个是子组件的搜索功能,另一个便是向父组件传递值的功能,并且是先搜索,搜索到了结果再传递给父组件。

下面介绍一下不使用setup语法糖的写法

不使用setup语法糖

在这里,我并没有使用setup语法糖。这里和上面的最大区别就是多出了export与return了,这也是setup语法糖最大的好处了,帮助我们简化了这一步骤,使得我们不用一个一个的去返回这些对象。

虽然与使用setup语法糖有些区别,但是核心思想是相同的。只不过是在使用emit时,不能再像上面一样使用defineEmits函数了。而是一个与setup同级的属性来实现

对应的父级组件如何来接收子组件传来的值 




在这里可以看见,父组件要想拿到子组件传递的值,大致的步骤如下:

1、监听子组件传递值的方法

2、在子组件触发传递值的方法时,父组件执行自己的方法处理拿到的值

这其中的@returnResults就是在监听子组件内的传值方法,当监听到时,便执行父组件内的getResults方法。可以在这个方法内部将拿到的值渲染进父组件内部。

总结

子组件一般使用emit就能向父组件传递值了,当然,如果是一些大家都需要用到的值,比如获取当前登入账号的信息,则应当存放在store仓库内更加合理。

你可能感兴趣的:(vue.js,前端,javascript)