Comment utiliser getCurrentInstance dans vue3

Dans le composant parent :

1. Importez le sous-composant dans la syntaxe de configuration Sugar

2. Liez la valeur de référence sur l'étiquette du sous-composant

3. Exportez la méthode getCurrentInstance depuis vue à la demande dans la configuration

4. méthode Exporter proxy

5. Implémentez l'appel via proxy.$refs. Nom de la référence du sous-composant Attributs/méthodes dans le sous-composant

<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>

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'));

Méthode 1. Obtenez l'instance de composant actuelle via la méthode getCurrentInstance pour obtenir l'itinéraire. et le routeur

Html

<template>
  <div>

  </div>
</template>
<script>
import { defineComponent, getCurrentInstance } from &#39;vue&#39;

export default defineComponent({
  name: &#39;About&#39;,
  setup(){
    const { proxy } = getCurrentInstance()
    console.log(proxy.$root.$route)
    console.log(proxy.$root.$router)
    return {}
  }
})
</script>

Méthode 2 : Utiliser la route et le routeur en important useRoute useRouter depuis la route.

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)
}
})

Pièce jointe : Le gros piège de getCurrentInstance dans Vue3

Il ne convient qu'au débogage pendant le développement ! Ne l'utilisez pas dans un environnement en ligne, sinon il y aura des problèmes !

Solution :

Option 1.

const instance = getCurrentInstance()
console.log(instance.appContext.config.globalProperties)

Obtenez la méthode de montage global

Option 2.

const { proxy } = getCurrentInstance()

L'utilisation d'un proxy en ligne ne posera pas de problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!