举例说明了vue开发中，一个子组件需要响应另一个子组件事件的方法。

1自定义事件

• 显示声明事件

//.vue
<script setup>defineEmits(['search', 'cancel'])
</script>

• 使用方法1：在js代码中

function buttonClick() {emit('search')
}

• 使用方法2：在html中

<el-button @click="$emit('search')">应用</el-button>

2调用子组件中的方法

<script setup>标签中的变量和方法默认是私有属性
访问子组件的方法为：

• 子组件声明对外接口

//子组件
<script setup>
function search() {console.log('search')
}function clearSearch() {}defineExpose({search,clearSearch
})
</script>

• 父组件通过appref调用子组件方法

//父组件.vue
<template><Filter id="filter" @search="search"></Filter><App class="content" id="app" ref="appref"></App>
</template><script setup lang="tsx">
import { ref } from "vue";
import App from "../app/App.vue";
const appref = ref()function search(val: object) {appref.value.search()
}
</script>