如何利用Vue 3的`defineExpose`暴露组件内部方法？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 `defineExpose` 的深度解析：组件内部方法暴露之道

各位同学，大家好！今天我们来聊聊 Vue 3 中一个非常重要的 API：defineExpose。在 Vue 2 中，我们通常使用 this.$refs 来访问子组件的实例，从而调用其内部方法。但在 Vue 3 中，由于 Composition API 的引入，this 的使用场景大大减少，$refs 的使用也变得不那么直观。defineExpose 的出现，就是为了解决这个问题，它提供了一种更清晰、更可控的方式来暴露组件的内部方法和属性。

一、 `defineExpose` 的基本概念

defineExpose 是一个编译器宏，只能在 <script setup> 语法糖中使用。它的作用是将组件内部的某些变量或方法显式地暴露给父组件，使其可以通过 ref 获取到子组件实例后，直接访问这些暴露出的成员。

语法:

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

const message = ref('Hello from child component')

const greet = () => {
  alert('Greetings from child!')
}

defineExpose({
  message,
  greet
})
</script>

在这个例子中，message 和 greet 被 defineExpose 暴露给了父组件。父组件可以通过 ref 获取到这个子组件的实例，然后访问 message 和 greet。

二、 `defineExpose` 的作用与优势

显式暴露: defineExpose 明确地声明了哪些成员是可以被外部访问的。这有助于提高代码的可读性和可维护性，避免了意外地暴露内部实现细节。
类型安全: 使用 TypeScript 时，defineExpose 可以提供类型检查，确保父组件访问的成员是存在的，并且类型是正确的。
更好的封装性: 通过 defineExpose，我们可以精确地控制哪些成员可以被外部访问，从而更好地封装组件的内部实现细节，防止外部代码随意修改组件的状态。
替代 this.$refs: 在 Composition API 中，defineExpose 提供了一种更优雅、更易于理解的方式来替代 this.$refs。

三、 `defineExpose` 的使用场景

defineExpose 适用于以下场景：

父组件需要调用子组件的方法: 例如，父组件需要触发子组件的某个动画，或者需要获取子组件的某个状态。
父组件需要访问子组件的状态: 例如，父组件需要获取子组件的某个输入框的值。
需要封装组件的内部实现细节: 例如，我们不希望父组件直接修改子组件的某个内部变量，而是希望通过暴露的方法来控制。

四、 `defineExpose` 的使用示例

下面通过几个示例来演示 defineExpose 的使用：

示例 1: 父组件调用子组件的方法

ChildComponent.vue:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

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

const message = ref('Hello from child component')

const handleClick = () => {
  message.value = 'Button clicked!'
}

const resetMessage = () => {
  message.value = 'Hello from child component'
}

defineExpose({
  resetMessage
})
</script>

ParentComponent.vue:

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="resetChildMessage">Reset Child Message</button>
  </div>
</template>

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

const childComponent = ref(null)

const resetChildMessage = () => {
  childComponent.value.resetMessage()
}

onMounted(() => {
  console.log(childComponent.value); // 确保在组件挂载后访问
});
</script>

在这个例子中，父组件通过 ref 获取到 ChildComponent 的实例，然后调用了 resetMessage 方法。注意，需要在 onMounted 钩子函数中访问 childComponent.value，以确保子组件已经挂载。

示例 2: 父组件访问子组件的状态

ChildComponent.vue:

<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

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

const inputValue = ref('')

defineExpose({
  inputValue
})
</script>

ParentComponent.vue:

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <p>Input Value: {{ childComponentValue }}</p>
  </div>
</template>

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

const childComponent = ref(null)

const childComponentValue = computed(() => {
  return childComponent.value?.inputValue.value
})

onMounted(() => {
  console.log(childComponent.value); // 确保在组件挂载后访问
});
</script>

在这个例子中，父组件通过 ref 获取到 ChildComponent 的实例，然后访问了 inputValue 属性。使用 computed 可以确保父组件始终显示最新的输入值。

示例 3: 使用 TypeScript 进行类型检查

ChildComponent.vue:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'

const message = ref<string>('Hello from child component')

interface PublicInterface {
  message: typeof message
  greet: () => void
}

const greet = (): void => {
  alert('Greetings from child!')
}

defineExpose<PublicInterface>({
  message,
  greet
})
</script>

ParentComponent.vue:

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="showChildMessage">Show Child Message</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import ChildComponent from './ChildComponent.vue'

const childComponent = ref<InstanceType<typeof ChildComponent> | null>(null)

const showChildMessage = () => {
  if (childComponent.value) {
    alert(childComponent.value.message.value)
  }
}

onMounted(() => {
  console.log(childComponent.value); // 确保在组件挂载后访问
});
</script>

在这个例子中，我们使用了 TypeScript 的接口 PublicInterface 来定义 defineExpose 暴露的成员的类型。这可以确保父组件访问的成员是存在的，并且类型是正确的。需要注意的是，我们需要使用 InstanceType<typeof ChildComponent> 来获取 ChildComponent 的实例类型。

五、 `defineExpose` 的注意事项

仅在 <script setup> 中使用: defineExpose 只能在 <script setup> 语法糖中使用。
显式暴露: 只有通过 defineExpose 暴露的成员才能被外部访问。
确保组件已挂载: 在父组件中访问子组件的实例时，需要确保子组件已经挂载。通常可以在 onMounted 钩子函数中访问。
避免过度暴露: 尽量只暴露必要的成员，避免过度暴露组件的内部实现细节。
类型安全: 尽可能使用 TypeScript 来进行类型检查，确保代码的可靠性。
响应式: 通过 defineExpose 暴露的 ref 或 reactive 变量仍然是响应式的，父组件可以观察到子组件状态的变化。

六、 `defineExpose` 与 `provide/inject` 的区别

defineExpose 和 provide/inject 都是 Vue 3 中用于组件间通信的 API，但它们的使用场景不同。

特性	`defineExpose`	`provide/inject`
通信方向	父组件访问子组件实例	祖先组件向后代组件传递数据
访问方式	通过 `ref` 获取子组件实例后访问	通过 `inject` 注入数据
适用场景	父组件需要直接调用子组件的方法或访问状态	祖先组件需要向多个后代组件传递共享数据
类型安全	可以通过 TypeScript 提供类型检查	可以通过 TypeScript 提供类型检查
灵活性	适用于简单的父子组件通信	适用于复杂的组件层级结构中的数据共享

简单来说，defineExpose 用于父组件直接访问子组件的内部成员，而 provide/inject 用于祖先组件向多个后代组件传递共享数据。

七、 `defineExpose` 的高级用法

1. 暴露计算属性:

你可以将计算属性暴露给父组件，让父组件可以访问到子组件的动态状态。

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref, computed, defineExpose } from 'vue'

const count = ref(0)

const doubledCount = computed(() => count.value * 2)

defineExpose({
  doubledCount
})
</script>

2. 暴露响应式对象:

你可以将响应式对象暴露给父组件，让父组件可以访问和修改子组件的多个状态。

<template>
  <div>
    <p>Name: {{ state.name }}</p>
    <p>Age: {{ state.age }}</p>
  </div>
</template>

<script setup>
import { reactive, defineExpose } from 'vue'

const state = reactive({
  name: 'John',
  age: 30
})

defineExpose({
  state
})
</script>

3. 暴露方法并传递参数:

你可以暴露方法，并且让父组件可以向这些方法传递参数。

<template>
  <div>
    <p>Message: {{ message }}</p>
  </div>
</template>

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

const message = ref('Initial message')

const updateMessage = (newMessage) => {
  message.value = newMessage
}

defineExpose({
  updateMessage
})
</script>

4. 结合 v-model 使用:

虽然 defineExpose 主要用于暴露方法和属性，但它也可以与 v-model 结合使用，实现更复杂的组件交互。你需要手动更新 v-model 绑定的值，并触发 update:modelValue 事件。

<template>
  <div>
    <input type="text" :value="modelValue" @input="handleInput" />
  </div>
</template>

<script setup>
import { ref, defineExpose, computed } from 'vue'
import { useVModel } from '@vueuse/core' // 需要安装 @vueuse/core

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

// 使用 useVModel 简化 v-model 的处理
const modelValue = useVModel(props, 'modelValue', emit)

// const modelValue = computed({
//   get: () => props.modelValue,
//   set: (value) => emit('update:modelValue', value)
// })

const handleInput = (event) => {
  //emit('update:modelValue', event.target.value) // 手动触发 update:modelValue 事件
  modelValue.value = event.target.value;
}

defineExpose({
  modelValue // 暴露响应式数据
})
</script>

在这个例子中，我们使用了 @vueuse/core 库中的 useVModel hook 来简化 v-model 的处理。当然你也可以选择手动实现 computed，达到同样的效果。父组件可以通过 ref 访问子组件的 modelValue，并观察其变化。

八、使用场景案例分析

案例 1: 表单验证组件

假设你正在开发一个表单验证组件，你需要暴露一个方法，让父组件可以触发表单验证。

FormValidation.vue:

<template>
  <form @submit.prevent="validateForm">
    <slot />
  </form>
</template>

<script setup>
import { ref, defineExpose, onMounted } from 'vue'

const isFormValid = ref(false)

const validateForm = () => {
  // 实现表单验证逻辑
  // ...
  isFormValid.value = true // 假设验证通过
}

defineExpose({
  validateForm,
  isFormValid
})
</script>

ParentComponent.vue:

<template>
  <div>
    <FormValidation ref="formValidation">
      <!-- 表单内容 -->
    </FormValidation>
    <button @click="submitForm">Submit</button>
  </div>
</template>

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

const formValidation = ref(null)

const submitForm = () => {
  formValidation.value.validateForm()
  if (formValidation.value.isFormValid) {
    // 提交表单
    alert('Form submitted successfully!')
  } else {
    // 显示错误信息
    alert('Form validation failed!')
  }
}
</script>

案例 2: Modal 组件

假设你正在开发一个 Modal 组件，你需要暴露方法来控制 Modal 的显示和隐藏。

Modal.vue:

<template>
  <div v-if="isVisible" class="modal">
    <div class="modal-content">
      <slot />
      <button @click="closeModal">Close</button>
    </div>
  </div>
</template>

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

const isVisible = ref(false)

const openModal = () => {
  isVisible.value = true
}

const closeModal = () => {
  isVisible.value = false
}

defineExpose({
  openModal,
  closeModal
})
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
}
</style>

ParentComponent.vue:

<template>
  <div>
    <button @click="openTheModal">Open Modal</button>
    <Modal ref="modal">
      <!-- Modal 内容 -->
      <p>This is the modal content.</p>
    </Modal>
  </div>
</template>

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

const modal = ref(null)

const openTheModal = () => {
  modal.value.openModal()
}
</script>

九、总结一下今天的内容

今天我们深入探讨了 Vue 3 中的 defineExpose API。它提供了一种清晰、类型安全的方式来暴露组件内部的方法和属性，方便父组件进行访问和控制。通过 defineExpose，我们可以更好地封装组件的内部实现细节，提高代码的可读性和可维护性。掌握 defineExpose 的使用，可以让你在 Vue 3 的开发中更加得心应手。

Vue 3 defineExpose 的深度解析：组件内部方法暴露之道

一、 defineExpose 的基本概念

二、 defineExpose 的作用与优势

三、 defineExpose 的使用场景

四、 defineExpose 的使用示例

五、 defineExpose 的注意事项

六、 defineExpose 与 provide/inject 的区别

七、 defineExpose 的高级用法

八、 使用场景案例分析