vue3.0 getCurrentInstance访问内部组件实例

超、凢脫俗 2021-07-24 21:22 2249阅读 0赞

getCurrentInstance支持访问内部组件实例，用于高阶用法或库的开发。
    
    使用:
    	  setup() {
    	    const internalInstance = getCurrentInstance()
    	
    	    internalInstance.appContext.config.globalProperties; 访问全局变量globalProperties
    	    getCurrentInstance().uid;	访问组件的id
    	  }
    
    在setup或生命周期钩子外使用,先在setup中调用getCurrentInstance()获取该实例然后再使用。
    	
    	const MyComponent = {
    	  setup() {
    	    const internalInstance = getCurrentInstance() 成功
    	
    	    const id = useComponentId() 成功
    	
    	    const handleClick = () => {
    		  getCurrentInstance()  获取失败
    	      useComponentId()      获取失败
    	
    	      internalInstance  成功
    	    }
    	
    	    onMounted(() => {
    	      getCurrentInstance()  成功
    	    })
    	
    	    return () =>
    	      h(
    	        'button',
    	        {
    	          onClick: handleClick
    	        },
    	        `uid: ${id}`
    	      )
    	  }
    	}
    	
       在组合式函数中调用也可以正常执行
    	function useComponentId() {
    	  return getCurrentInstance().uid
    	}

发表评论取消回复

表情：

评论列表（有 0 条评论，2249人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3+ts 使用 getCurrentInstance 报错解决

vue3中没有this + 各种api的方法 vue3提供的方法，创建类似于this的实例。 const instance = getCurrentInstance()

刺骨的言语ヽ痛彻心扉/ 2024年04月01日 17:18/ 0 赞/ 69 阅读

相关 Vue提示框组件vue-notification使用实例演示

先看下演示效果： ![请添加图片描述][5a25f0d8ea2447f0bd2ea272a8e8cec1.gif] 安装方法：通过 `npm install vu

雨点打透心脏的1/2处/ 2024年03月25日 21:11/ 0 赞/ 36 阅读

相关 30 Vue子组件调用父组件方法、传值和校验

\[组件\]Vue子组件调用父组件方法、传值和校验阐述编写计数器案例子组件调用父组件事件子组件向父组件传递参数对传递值的校验

古城微笑少年丶/ 2023年10月06日 20:38/ 0 赞/ 9 阅读

相关关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充

上一篇文章：[快速使用Vue3最新的15个常用API（1W5+字详解，建议收藏）][Vue3_15_API_1W5]，我向大家介绍了关于Vue3常用的15个API的使用详情，帮

水深无声/ 2022年12月24日 13:56/ 0 赞/ 203 阅读

相关 Vue.js（2）：应用与组件实例

一、创建一个应用实例每个 Vue 应用都是通过用 `createApp` 函数创建一个新的应用实例开始的： const app = Vue.c

布满荆棘的人生/ 2022年09月13日 12:29/ 0 赞/ 183 阅读

相关 vue父子组件之间通信实例

一、父组件向子组件传递数据 ①获取数据并在父组件上绑定数据 ②在子组件使用props接收父组件传递过来数据 ③将接收的数据绑定到子组件模板二、子组件向父组件传递

待我称王封你为后i/ 2022年04月21日 21:06/ 0 赞/ 258 阅读

相关 Vue学习笔记（五）——组件与实例

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 组件与实例定义的几个不同点： 1.

叁歲伎倆/ 2022年03月10日 14:40/ 0 赞/ 194 阅读

相关 vue-router路由内组件实例和路由外组件实例互相访问

各种层级路由之间的通信，首先想到的可能是Vuex，但在某些情况下，我并不想用Vuex，想通过获取组件实例，直接进行交互。 <template> <di

港控/mmm°/ 2021年12月15日 21:03/ 0 赞/ 417 阅读

相关 Vue 小实例 - 组件化、cli 工程化

1. 组件化（父子组件通信：父 - 子：props 数组子 - 父：子层触发事件，调用 $emit 触发父层对应自定义事件，可函数处理传参 / $event 获取）

妖狐艹你老母/ 2021年11月01日 06:34/ 0 赞/ 333 阅读

相关 vue3.0 getCurrentInstance访问内部组件实例

getCurrentInstance支持访问内部组件实例，用于高阶用法或库的开发。使用: setup() { con

超、凢脫俗/ 2021年07月24日 21:22/ 0 赞/ 2250 阅读