您好,欢迎访问一九零五行业门户网

vue3中getCurrentInstance怎么使用

父组件中:1.setup语法糖中导入子组件
2.在子组件标签上绑定ref值
3.setup内部从vue中按需导出 getcurrentinstance 方法
4.调用getcurrentinstance方法导出proxy
5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用
<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.jsimport 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 和 routerhtml
<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。html
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的大坑开发中只适用于调试! 不要用于线上环境,否则会有问题!
解决方案:
方案1.
const instance = getcurrentinstance()console.log(instance.appcontext.config.globalproperties)
获取挂载到全局中的方法
方案2.
const { proxy } = getcurrentinstance()
使用proxy线上也不会出现问题。
以上就是vue3中getcurrentinstance怎么使用的详细内容。
其它类似信息

推荐信息