vue3에서 getCurrentInstance를 사용하는 방법

상위 구성 요소에서:

1. 설정 구문 설탕에서 하위 구성 요소를 가져옵니다.

2. 하위 구성 요소 레이블에 ref 값을 바인딩합니다.

3. 필요에 따라 설정 내에서 getCurrentInstance 메서드를 내보냅니다.

4. 메소드 Proxy.$refs를 통해 호출을 구현하십시오. and router

Html

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

방법 2: 경로에서 useRoute useRouter를 가져와 경로와 라우터를 사용합니다.

Html

import api from "./utils/api.js"
import StringUtil from "./utils/StringUtil.js"

app.config.globalProperties.api = api;
app.config.globalProperties.StringUtil = StringUtil;

첨부: Vue3의 getCurrentInstance에 대한 큰 함정

개발 중 디버깅에만 적합합니다! 온라인 환경에서는 사용하지 마십시오. 그렇지 않으면 문제가 발생합니다!

해결책:

옵션 1.

import {getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

console.log(proxy.api);
console.log(proxy.StringUtil.isBlank('1'));

전역적으로 마운트하는 방법 가져오기

옵션 2.

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

프록시를 온라인으로 사용해도 문제가 발생하지 않습니다.

위 내용은 vue3에서 getCurrentInstance를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!