vue3+ts，组件之间带参数的emit

原创已于 2024-01-03 15:28:09 修改 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2024-01-03 15:17:28 首次发布

前端学习专栏收录该内容

3 篇文章

订阅专栏

这篇文章介绍了如何在Vue.js中，通过`emit`和`props`实现子组件向父组件传递数据，以进行搜索配置的交互。子组件通过`@click`触发事件并发送数据，父组件通过`v-on`监听并处理接收到的数据。

子组件：

<script>

defineEmits<{
  search: [searchConfig: SearchConfig];
}>();

</script>

<template>
<el-button
    @click="$emit('search', searchConfig)"
>
</template>

父组件：

<template>

    <Search @search="handleSearch" />

</template>

<script setup lang="ts">

function handleSearch(data:SearchConfig){
console.log(data);
}

</script>