Vue3子组件向父组件传值及传递事件

轻编程

于 2023-04-20 14:23:06 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3组件化开发实战文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_41861301/article/details/130265604

Vue3组件化开发实战专栏收录该内容

11 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue3中子组件如何向父组件传递值和事件，强调了这一需求在组件复用场景中的重要性。通过实例展示了在子组件中使用$emit触发自定义事件，并在父组件中通过v-on监听和处理这些事件的方法。同时，详细阐述了在子组件中绑定响应式值、监听change事件以及在父组件中接收回调事件的步骤。最后，提到了使用defineEmits在setup中导出事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件向父组件传值

为什么会产生这样一个需求，我们先来看看我们已经封装好的search类型的组件，在其内部有一个搜索框，当他被引入父组件之后，其组件内部的事件和值就必须要传递到父组件，才能进一步操作，和完成需求，也才能称其为真正的复用组件！

回到我们这个组件，用一个简单的复用来说明这个需求的实际使用场景，当我们多次引入这个search组件之后，我们就会发现每次修改传值的业务操作，我们都要回到子组件中去操作，那如果父组件中的两个搜索框要执行不一样的业务操作，那么将会出现一个严重的冲突，只能绑定一个回调！

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 (例如：在 v-on 的处理函数中)：

官方文档：https://cn.vuejs.org/guide/components/events.html

<button @click="$emit('someEvent')">click me</button>

search组件子组件值传递给父组件

根据官方文档的相关描述，我们可以将搜索模块的表单修改如下：

<template>
    <a-input-search 
        v-model:value="searchValue" 
        @change="$emit('update:searchValue', $event.target.value)"  
        @searc