vue3中getCurrentInstance怎么使用
时间：2023-05-16 19:42
1.setup语法糖中导入子组件 2.在子组件标签上绑定ref值 3.setup内部从vue中按需导出 getCurrentInstance 方法 4.调用getCurrentInstance方法导出proxy 5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用 Html Html 开发中只适用于调试！ 不要用于线上环境，否则会有问题！ 解决方案： 方案1. 获取挂载到全局中的方法 方案2. 使用proxy线上也不会出现问题。 以上就是vue3中getCurrentInstance怎么使用的详细内容，更多请关注Gxl网其它相关文章！父组件中：
<template> <!-- 父组件 --> <div> <!-- 子组件 --> <Child ref="child" /> <button @click="changeChildren">子组件count+1</button> </div></template> <script setup lang="ts" name="Father">import { getCurrentInstance, ComponetInternalInstance,ref } from "vue";import Child from "./zi.vue";const child = ref(null) // as ComponetInternalInstance表示类型断言，ts时使用。否则报错，proxy为nullconst { proxy } = getCurrentInstance() as ComponetInternalInstance;function changeChildren() { proxy.$refs.child.count += 1; //也可以使用ref数据.value的形式调用： //child.value.count += 1 console.log(child.value.name)}</script> <style scoped></style>main.js
import api from "./utils/api.js"import StringUtil from "./utils/StringUtil.js"app.config.globalProperties.api = api;app.config.globalProperties.StringUtil = StringUtil;
import {getCurrentInstance } from 'vue';const { proxy } = getCurrentInstance();console.log(proxy.api);console.log(proxy.StringUtil.isBlank('1'));方式一、通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router
<template> <div> </div></template><script>import { defineComponent, getCurrentInstance } from 'vue'export default defineComponent({ name: 'About', setup(){ const { proxy } = getCurrentInstance() console.log(proxy.$root.$route) console.log(proxy.$root.$router) return {} }})</script>方式二：通过从路由中导入 useRoute useRouter 使用 route 和 router。
import { defineComponent } from ‘vue'import { useRoute, useRouter } from ‘vue-router'export default defineComponent({setup () {const $route = useRoute()const r o u t e r = u s e R o u t e r ( ) c o n s o l e . l o g ( router = useRouter() console.log(router=useRouter()console.log(route)console.log($router)}})附：Vue3中关于getCurrentInstance的大坑
const instance = getCurrentInstance()console.log(instance.appContext.config.globalProperties)
const { proxy } = getCurrentInstance()
