Vue 3 中如何在 setup() 函数中访问组件实例（this）？

Vue 3 中如何在 setup() 函数中访问组件实例（this）？

回答：
在 Vue 3 的 Composition API 中，setup() 函数在组件实例被创建之前执行，因此无法直接通过 this 访问组件实例。若确实需要访问组件实例（如调用 $emit、$refs 等），应使用以下替代方式：

1. 使用 defineComponent 与 getCurrentInstance：
   Vue 3 提供了 getCurrentInstance() 方法，可在 setup() 中获取当前组件的内部实例对象（注意：这不是用户可见的 this，而是内部实例）。

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();
    // 例如访问 emit
    const emit = instance.emit;
    // 或访问 attrs、slots、refs 等
    console.log(instance.attrs);
    
    return {};
  }
}

2. 推荐做法：避免依赖 this，改用显式 API
   • 使用 emit：通过 setup(props, { emit }) 的第二个参数直接获取 emit。
   • 使用 ref：通过 ref() 创建响应式引用，并在模板中绑定以访问 DOM 或子组件。
   • 使用 provide/inject：替代依赖 this 的跨组件通信。

解析：
Vue 3 的 Composition API 设计初衷是解耦逻辑、提升代码复用性，因此有意移除了 setup() 中对 this 的支持。使用 getCurrentInstance() 虽可行，但属于底层 API，官方建议仅在编写插件或高级库时使用。日常开发中应优先使用 props、emit、ref、reactive 等显式声明的响应式 API，以保持代码的可读性和可维护性。