So verwenden Sie getCurrentInstance in vue3

In der übergeordneten Komponente:

1. Importieren Sie die Unterkomponente im Setup-Syntax-Label

3. Exportieren Sie die getCurrentInstance-Methode bei Bedarf im Setup Methode Export Proxy

5. Implementieren Sie den Aufruf über Proxy.$refs. Attribute/Methoden der Unterkomponente

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

Methode 1. Rufen Sie die aktuelle Komponenteninstanz über die Methode getCurrentInstance ab und Router

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>

Methode 2: Route und Router verwenden, indem useRoute useRouter aus der Route importiert wird.

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

Anhang: Der große Fallstrick bei getCurrentInstance in Vue3

Es ist nur zum Debuggen während der Entwicklung geeignet! Verwenden Sie es nicht in einer Online-Umgebung, da es sonst zu Problemen kommt!

Lösung:

Option 1.

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

Erhalten Sie die Methode zur globalen Bereitstellung.

Option 2.

const { proxy } = getCurrentInstance()

Die Online-Verwendung eines Proxys verursacht keine Probleme.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie getCurrentInstance in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!