详细分析Vue3中的defineExpose

defineExpose是Vue 3中的一个Composition API，它用于在单文件组件（SFC）中暴露组件的公共实例属性和方法。这通常用于父组件直接访问子组件内部的引用。

使用defineExpose的场景通常是当父组件使用ref来获取子组件实例时。在Vue 3中，默认情况下，组件的公共实例只包含模板中使用的响应式数据和方法。如果需要暴露更多内容，就需要使用defineExpose。

下面是一个简单的例子：

子组件 (ChildComponent.vue):

<template>
  <div>
    <button @click="incrementCounter">Count: {{ counter }}</button>
  </div>
</template>
 
<script>
import { ref, defineExpose } from 'vue';
 
export default {
  setup() {
    const counter = ref(0);
    
    function incrementCounter() {
      counter.value++;
    }
 
    // 明确暴露的属性和方法
    defineExpose({
      counter,
      incrementCounter
    });
 
    return {
      counter
    };
  }
};
</script>

父组件:

<template>
  <ChildComponent ref="childCompRef"/>
 
  <button @click="incrementCounter">Increment Child Counter</button>
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const childCompRef = ref(null);
 
    function incrementCounter() {
      if (childCompRef.value) {
        childCompRef.value.incrementCounter();
      }
    }
 
    return {
      childCompRef,
      incrementCounter
    };
  }
};
</script>

在这个例子中，子组件通过defineExpose暴露了counter响应式数据和incrementCounter方法。父组件通过ref获取子组件的引用，并可以通过引用调用incrementCounter方法或访问counter属性。