您现在的位置是：首页 >技术杂谈 >Vue3子组件向父组件传值及传递事件网站首页技术杂谈

子组件向父组件传值

为什么会产生这样一个需求，我们先来看看我们已经封装好的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)"