Bagaimana untuk menggunakan getCurrentInstance dalam vue3

Dalam komponen induk:

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>

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

Kaedah 1: Dapatkan contoh komponen semasa melalui kaedah getCurrentInstance untuk mendapatkan laluan dan penghala

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>

Kaedah 2: Melalui laluan Import useRoute useRouter untuk menggunakan laluan dan penghala.

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

Lampiran: Perangkap besar tentang getCurrentInstance dalam Vue3

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!