vue 自定义事件和子组件方法调用

举例说明了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>