vue3 defineExopse 和子传父有什么区别代码演示

`defineExpose` 和子传父的区别在于使用方式和作用范围。

`defineExpose` 是在组件内部使用的方法，用来将组件内的方法或属性暴露出去，可以被父组件或其他组件调用。而子传父是通过 `$emit` 事件将数据从子组件传递到父组件，父组件再通过 `v-on` 监听子组件的事件，从而获取子组件传递的数据。

下面是一个简单的代码演示：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">{{ message }}</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
  methods: {
    handleClick() {
      this.$emit('update:message', 'Hello from child');
    },
    // 将该方法暴露出去
    showMessage() {
      alert(this.message);
    },
    // 将该属性暴露出去
    count: 0,
  },
  // 在 setup 中使用 defineExpose 将方法和属性暴露出去
  setup(props, { expose }) {
    expose({
      showMessage: this.showMessage,
      count: this.count,
    });
  },
};
</script>

可以看到，`defineExpose` 是在组件的 `setup` 函数中使用的，用来将组件内部的方法和属性暴露出去，供其他组件使用。而子传父是在模板中使用的，通过 `$emit` 方法将数据从子组件传递到父组件。