Vue 3 组件实例

在 Vue 3 中，每个组件实例都是由 createApp 或 defineComponent 创建的，包含 生命周期、状态管理、方法、计算属性等。本篇介绍 Vue 组件实例的结构、如何访问实例及其应用场景。

1. 组件实例是什么？

Vue 组件实例是 Vue 组件的具体实现，它管理组件的数据、方法、计算属性、生命周期等。

在 Vue 3 组合式 API 中，我们使用 setup() 处理组件逻辑，而 组件实例本身不会作为 this 直接访问（与 Vue 2 不同）。

2. 获取组件实例

2.1 通过 getCurrentInstance() 获取当前组件实例

getCurrentInstance() 返回当前组件的实例对象，包含 proxy（组件代理对象）等信息。

示例：获取组件实例

<template>
  <button @click="logInstance">获取组件实例</button>
</template>

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

const logInstance = () => {
  const instance = getCurrentInstance();
  console.log(instance); // 查看组件实例
};
</script>

注意：

  • getCurrentInstance() 只能在 setup() 及生命周期钩子中使用，不能在模板或 methods 里使用。

2.2 在 <script setup> 访问组件实例

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

const instance = getCurrentInstance();
console.log(instance?.proxy); // 组件的 `proxy` 代理
</script>

3. 组件实例包含的属性

Vue 3 组件实例包含多个关键属性：

属性说明
proxy组件的代理对象（等同于 Vue 2 的 this）
props组件接收的 props
attrs非 props 绑定的属性
slots传递的插槽
emit触发事件的方法
expose()公开组件内部方法

4. 使用 expose() 让父组件访问子组件实例

在 Vue 3，默认情况下 父组件无法访问子组件的内部方法，但可以用 expose() 来暴露它。

示例：父组件调用子组件方法

子组件 Child.vue

<template>
  <p>当前计数：{{ count }}</p>
  <button @click="increment">增加</button>
</template>

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

const count = ref(0);

const increment = () => {
  count.value++;
};

// 允许父组件访问 `increment` 方法
defineExpose({ increment });
</script>

父组件 Parent.vue

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

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

const childRef = ref(null);

const callChildMethod = () => {
  childRef.value?.increment(); // 调用子组件 `increment`
};
</script>

说明

  • defineExpose({ increment }) 让 increment 方法暴露给父组件。
  • ref="childRef" 让父组件能访问子组件实例。
  • childRef.value?.increment() 直接调用子组件方法。

5. 访问父组件实例

Vue 3 使用 inject() 访问 provide() 提供的依赖，而不能直接获取父组件实例（不同于 Vue 2 的 $parent）。

示例：父组件提供数据，子组件访问

父组件

<template>
  <ProvideChild />
</template>

<script setup>
import { provide, ref } from 'vue';
import ProvideChild from './ProvideChild.vue';

const message = ref('来自父组件的数据');

provide('sharedMessage', message);
</script>

子组件

<template>
  <p>{{ sharedMessage }}</p>
</template>

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

const sharedMessage = inject('sharedMessage');
</script>

说明

  • provide('sharedMessage', message) 向子组件提供数据。
  • inject('sharedMessage') 在子组件中接收数据。

6. 组件实例生命周期

Vue 3 组件实例的生命周期与 Vue 2 类似，但采用 onMounted() 等 组合式 API 方式。

示例：组件生命周期

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件已卸载');
});
</script>

7. 组件实例的应用场景

应用场景解决方案
获取当前组件实例getCurrentInstance()
让父组件访问子组件方法defineExpose() 并使用 ref
访问父组件数据provide() & inject()
监听生命周期onMounted(), onUnmounted()

总结

  • Vue 3 组件实例不可通过 this 访问，需用 getCurrentInstance() 获取。
  • defineExpose() 允许父组件调用子组件方法。
  • 父子组件通信可用 provide/inject 代替 $parent。
  • 生命周期函数采用 onMounted() 等组合式 API。

这些技巧能帮助你更好地管理 Vue 3 组件，提高代码可维护性！🚀