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

本文主要是介绍vue3中，子组件如何向父组件传值，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

写作灵感

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

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

使用setup语法糖

<script lang="ts" setup>
import { reactive, ref,defineEmits } from 'vue'
import API from '@/untils/axios';
import store from '@/store';const emit=defineEmits(["returnResults"])
var select=ref("1")
var content=ref("")
var users=reactive({data:[]
})
function search(){if(select.value=="1"){//选择账号查询API.get(store.state.baseUrl+"user/account",{params:{account:content.value}}).then((res)=>{console.log(res)})} else {//选择姓名查询}emit("returnResults",users.data)
}</script>

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

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

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

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

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

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

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

不使用setup语法糖

<script lang="ts">
import { defineComponent,reactive, ref } from 'vue'export default defineComponent({emits:["returnResults"],name:"searchComponent",setup(){var select=ref("1")var content=ref("")var users=reactive({data:[]})return{select,users,content}},methods:{search(){this.$emit("returnResults",this.users.data)}}
})
</script>

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

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

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

<template><div><searchComponent @returnResults="getResults"/></div>
</template><script lang="ts">
import { defineComponent } from 'vue'
import searchComponent from "@/components/searchComponent.vue"export default defineComponent({components:{searchComponent},setup(){function getResults(e:any){console.log(e)}return{getResults}}
})
</script>

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

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

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

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