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方法。可以在这个方法内部将拿到的值渲染进父组件内部。

总结

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