vue3 子组件暴露方法

在 Vue3 中，子组件想要将其定义的方法暴露给父组件以便在父组件中调用，可以通过以下几种方式：

1. **props**（属性）传递：虽然不是直接暴露方法，但子组件可以通过 `methods` 对象中的方法作为 props 传递给父组件。父组件可以在接收到这些 prop 后，创建一个事件监听器来调用子组件的方法。

// 子组件
<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup>
import { ref } from 'vue';

export default {
  methods: {
    handleClick() {
      // ...
    }
  },
  props: {
    callMe: {
      type: Function,
      required: true,
    }
  }
};
</script>

// 父组件
<template>
  <ChildComponent :callMe="handleClickFromParent" />
</template>

<script>
function ParentComponent() {
  const handleClickFromParent = () => {
    console.log('从父组件调用了子组件的方法');
  };

  return {
    components: {
      ChildComponent
    },
    methods: {
      handleClickFromParent
    }
  };
}
</script>

2. **自定义事件**（$emit）：子组件可以定义一个或多个自定义事件，当方法被触发时，通过 `$emit` 发送到父组件。父组件可以监听这些事件并执行相应操作。

// 子组件
<template>
  <button @click="$emit('custom-event', 'method-called')">点击我</button>
</template>

<script>
export default {
  emits: ['custom-event']
};
</script>

// 父组件
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
const ParentComponent = {
  methods: {
    handleCustomEvent(event, method) {
      console.log(`从子组件 ${method} 被调用了`);
    }
  }
};
</script>

3. **ref 和 on**（仅适用于 composition API）：如果子组件是函数式组件，可以使用 `on` 方法和 `ref` 来暴露方法，这种方式更接近于React的生命周期管理。

// 子组件 (composition API)
<script setup>
import { onMounted } from 'vue';
import { ref } from 'vue';

const handleClick = () => {
  // ...
};

onMounted(() => {
  window.handleClick = handleClick;
});
</script>

<!-- 父组件 -->
<template>
  <ChildComponent />
</template>

<script>
const ChildComponent = {
  name: 'ChildComponent',
};
</script>

然后在父组件中，你可以通过全局变量 `window.handleClick` 来调用子组件的方法。