vue3 defineexpose defineEmit

Vue3中，`defineExpose` 和 `defineEmit` 是 Composition API 提供的重要工具。

1. `defineExpose`: 这是一个用于暴露组件内部状态给其子组件或外部作用域的方法。当你想要在子组件中访问父组件的一些数据或者方法，而不是通过 props 传递时，可以使用它。例如：

import { ref, defineExpose } from 'vue';
export default {
  setup() {
    const name = ref('John Doe');
    
    // 使用 defineExpose 暴露变量
    defineExpose({ name });

    return {};
  }
};

在子组件中，你可以直接通过 `this.$parent.name` 访问到 `name` 变量。

2. `defineEmit`: 此方法用于设置组件的自定义事件发射器。在 Vue 中，通常我们使用 `emits` 配置或 `$emit` 方法来发送事件。`defineEmit` 允许你在组件内动态地配置允许触发的事件及它们接收的参数。示例如下：

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  emits: ['customEvent'], // 显式指定允许触发的事件

  methods: {
    handleCustomEvent(data) {
      this.$emit('customEvent', data);
    }
  },
  setup() {
    // ...
  }
});

在其他组件中，可以监听这个自定义事件并处理数据：

<ParentComponent @customEvent="handleData"></ParentComponent>
...
methods: {
  handleData(data) {
    console.log(data);
  }
}