判断 Vue 3.x 子组件被引用时是否被父组件定义事件

六月 12, 2024 / 技术分享

要判断的话不能用`defineEmits()`定义事件，不然 `useAttrs()`获取不到事件。废话不多说，直接上代码。

### Child.vue
```
<script setup lang="ts">
import {useAttrs} from "vue";
const attrs = useAttrs();

const handleReset = () => {
  const onReset = attrs['onReset'];
  if (onReset) {
    onReset()
  } else {
    alert('onReset 子组件的默认方法')
  }
}

const handleSearch = () => {
  const onSearch = attrs['onSearch'];
  if (onSearch) {
    onSearch()
  } else {
    alert('onSearch 子组件的默认方法')
  }
}

</script>

### Parent.vue
```
<script setup lang="ts">
import Child from "@/components/Child.vue";

const handleReset = () => {
  alert('onReset 父组件的方法')
}
</script>

### 参考资料
- https://cn.vuejs.org/guide/components/attrs.html
- https://cn.vuejs.org/guide/components/events.html#defining-custom-events