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仓库内更加合理。