Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan getCurrentInstance dalam vue3
1 Import subkomponen dalam persediaan gula sintaks
2. Ikat nilai ref pada label subkomponen
3. . Sediakan secara dalaman daripada Eksport kaedah getCurrentInstance atas permintaan dalam vue
4 Panggil kaedah getCurrentInstance untuk mengeksport proksi
5. kaedah dalam subkomponen
<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为null const { 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>
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'));
Html
<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>
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) } })
Hanya sesuai untuk nyahpepijat semasa pembangunan! Jangan gunakannya dalam persekitaran dalam talian, jika tidak akan ada masalah!
Penyelesaian:
Pilihan 1.
const instance = getCurrentInstance() console.log(instance.appContext.config.globalProperties)
Dapatkan kaedah pemasangan ke global
Pilihan 2.
const { proxy } = getCurrentInstance()
Gunakan Di sana tiada masalah dalam talian dengan proksi.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan getCurrentInstance dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!