vue3组合式API getCurrentInstance

Vue3中的组合式API提供了一个名为getCurrentInstance()的方法，这是在Composition API中用于获取当前组件实例的一种便捷方式。当你在setup()函数或者是在自定义指令、全局守卫等地方需要访问到组件实例时，可以使用这个方法。通过this.$app.getCurrentInstance()可以在非组件上下文中获取到应用级别的实例，而this.getCurrentInstance()则限于当前组件内部。
这个方法返回的对象包含了组件实例的许多属性，如插槽、props、data等，这对于在运行时动态操作组件的行为或者获取组件状态非常有用。例如，你可以检查组件是否挂载，或者改变组件内的变量：
const { slots, propsData } = useComponent(); // 使用 composition-api-helpers

if (useRef(isMounted).value) {
slots.default.someSlotMethod(propsData);
}
登录后复制

相关问题

vue3组合式API的emit自定义事件

在 Vue 3 的组合式 API 中，我们可以使用 getCurrentInstance 方法来获取当前组件实例，然后使用 emit 方法来触发自定义事件。
首先，在提供方组件中，你可以将 emit 方法作为一个自定义函数提供给其他组件。例如：
import { provide, getCurrentInstance } from 'vue';

export default {
setup() {
const instance = getCurrentInstance();

// 定义自定义事件的方法
const emitCustomEvent = () => {
instance.emit('customEvent', /* 传递的参数 */);
};

provide('customEvent', emitCustomEvent);

// ...
},
};
登录后复制
然后，在使用方组件中，你可以使用 inject 方法来获取提供方组件中的自定义函数，并调用 emit 方法来触发自定义事件。例如：
import { inject } from 'vue';

export default {
setup() {
// 接收自定义事件的方法
const customEvent = inject('customEvent');

// 触发自定义事件
customEvent && customEvent(/* 传递的参数 */);

// ...
},
};
登录后复制
通过这种方式，你就可以在 Vue 3 的组合式 API 中使用 emit 方法来触发自定义事件了。希望能对你有所帮助！如有疑问，请继续提问。

vue3 增加的 api

Vue3 新增 API 列表与功能介绍
Composition API 组合 API
Composition API 是一种替代 Options API 的新方法，允许开发者更灵活地组织逻辑[^1]。通过 setup 函数，在组件创建前执行并返回需要暴露给模板的对象。
import { ref, computed } from 'vue'

export default {
setup() {
const count = ref(0)

function increment() {
count.value++
}

return {
count,
doubleCount: computed(() => count.value * 2),
increment
}
}
}
登录后复制
getCurrentInstance 方法
为了兼容旧版代码以及某些特殊场景需求，Vue3 提供了 getCurrentInstance() 方法用于获取当前活跃的组件实例[^2]：
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
console.log(instance.ctx) // 访问上下文属性
登录后复制
provide / inject 对象传递机制改进
根组件可以使用 provide 向下层子组件提供数据；而子组件则可通过 inject 接收这些共享的数据[^3]:
// 父级组件
<template>
<child />
</template>

<script>
import { provide } from '@vue/composition-api'
export default {
setup () {
provide('themeColor', 'red')
}
}
</script>

// 子级组件
<template>{{ themeColor }}</template>

<script>
import { inject } from '@vue/composition-api'
export default {
setup () {
const themeColor = inject('themeColor')
return { themeColor }
}
}
</script>
登录后复制
v-bind 支持 <style> 标签绑定变量
现在可以直接在样式标签内利用 v-bind: 或者简写形式 : 将 JavaScript 表达式作为 CSS 属性值传入[^4]：
<style scoped>
.example-class {
color: v-bind(textColor);
}
</style>

<script>
export default {
data() {
return {
textColor: '#ff0000',
};
},
};
</script>
登录后复制
markRaw 防止对象被代理化处理
当不想让某个特定对象成为响应式时，可调用此函数将其标记为原始状态，从而避免不必要的性能开销[^5]：
import { markRaw, reactive } from 'vue';

let originalObject = {};
let rawMarkedObject = markRaw(originalObject);

let state = reactive({
obj: rawMarkedObject,
});

state.obj === rawMarkedObject; // true
登录后复制