vue3 中父组件调用子组件的方法，子组件是不是必须暴露方法

在 Vue 3 中，父组件调用子组件的方法时，子组件 必须暴露方法，否则父组件无法直接访问子组件的内部方法。

原因

Vue 3 的设计原则是强调组件的封装性和可维护性。子组件的方法默认是私有的，只有通过明确暴露（expose 或 defineExpose）才能被父组件访问。这种设计有助于避免直接访问子组件内部实现的潜在问题，比如破坏封装性或导致难以维护的代码。

如何暴露方法

在 Vue 3 中，可以通过以下方式暴露子组件的方法：

1. Composition API

在 Composition API 中，使用 defineExpose 来暴露方法：

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

const count = ref(0)

function increment() {
  count.value++
}

// 暴露方法
defineExpose({
  increment
})
</script>

2. Options API

在 Options API 中，使用 expose 选项来暴露方法：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  expose: ['increment'] // 暴露方法
}

父组件调用子组件方法

父组件可以通过 ref 或 provide/inject 来调用子组件暴露的方法。

示例：通过 ref

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childRef = ref(null)

function callChildMethod() {
  childRef.value.increment() // 调用子组件暴露的方法
}
</script>

总结

• 子组件必须通过 defineExpose（Composition API）或 expose（Options API）来暴露方法。
• 父组件通过 ref 或其他机制访问子组件暴露的方法。
• 这种设计有助于保持组件的封装性和代码的可维护性。