首页 > 其他分享 >Vue2和Vue3获取组件名称

Vue2和Vue3获取组件名称

时间:2024-05-28 20:56:06浏览次数:35  
标签:name getCurrentInstance 获取 Vue2 Vue3 组件 type

Vue 获取组件名称

Vue2 获取组件名称

获取方式:this.$options.name

解读:通过 Vue2 的 this 关键字,可以很容易地访问 Vue 组件实例对象身上的 $options 的 name 属性来获取组件名称。

<script>
export default {
  name: "Brand",
  mounted() {
    // Brand
    console.log(this.$options.name)
  }
}
</script>

image-20240528200148572.



Vue3 获取组件名称

获取方式:getCurrentInstance().type.__name

解读:Vue3 无法使用 this 关键字,但是官方提供了 getCurrentInstance() 方法来获取当前 Vue 组件实例对象,再通过 type 来获取 __name 组件名称。

<script setup>
import {getCurrentInstance, onMounted} from "vue"

onMounted(() => {
  console.log(getCurrentInstance().type.__name)
})
</script>

image-20240528200613299.

⚠️ 其实通过 getCurrentInstance().ctx.$options.__name 也可以获取 Vue3 组件实例名称,但是比较复杂。



标签:name,getCurrentInstance,获取,Vue2,Vue3,组件,type
From: https://www.cnblogs.com/rnny/p/18218834

相关文章

  • VUE3操作系统之【文件管理】
    回顾VUE3开发操作系统日志【窗口拖拽,碰撞检测,附带代码】-CSDN博客概要作为一个操作系统,文件管理当然是必不可少的存在这可不是静态作秀的页面,是真实的文件增删改查本期会分享一些上传的技术细节在线预览:AX先看长啥样技术选型前端:Vue3+Antui+Splitpanes后端:JavaJ......
  • 升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0 uniapp、vue、android、web 框
    升鲜宝供应链管理系统重构版发布(技术点:Java8、mysql8.0uniapp、vue、android、web框架:Vue3+SpringBoot3),界面功能(二)    客户订货---订货模板      客户订货模板      ......
  • vue2组件中监听vuex中state的值
    vue2组件中监听Vuex 中state的值可以使用 mapState。官网链接:mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。Getter|Vuex(vuejs.org)参考文档: 监听Vuex中的数据变化-资深if-else侠-博客园(cnblogs.com)Vuex入门(2)——state,mapState,...ma......
  • vue3 动态组件
    <template><divclass="max_box"><a-tabsv-model:activeKey="activeKey"@change="callback"><a-tab-pane:tab="item.tab"v-for="iteminstate.list":key="i......
  • .net core的WebAPI+Vue2实现调用设备拍照上传图片功能
    在工作中有时候会遇到上传文件上传图片或者拍照上传图片功能。这时候底下的内容就有可能可以帮助到你。后端的支持上传图片和上传文件功能。前端如果你选择普通上传功能就是普通上传功能,我这里选择的是调用相机设备实现拍照上传图片功能。1.首先这是后端的控制器接口。1///<......
  • Qt UI界面组件介绍
    1.布局类(4种) 2.固定弹簧类(2种)(不随布局变化) 3.按钮类(6种) 4.容器类(10种)GroupBox类似于win7的日历框ToolBox类似于QQ的好友列表Tabwidget类似于 5.输入窗() 6.显示窗()......
  • docker containerd runc containerd-shim等组件的关系
    早期kubelet创建容器工作原理因为docker出生的比k8s早,所以k8s早期的容器运行时都是基于docker的,kubelet通过docker的api创建容器。后来,k8s官方不想绑死在docker这架马车上,就把容器运行时抽象出来,定义了一个接口,叫CRI(containerruntimeinterface),容器......
  • 【uni-app】 textarea组件的auto-hieght属性,显隐切换时高度异常,无法自适应内容撑开。
    bug1:在uni-app中,在使用多文本输入框时,如果输入框存在if的显隐切换时,真机调试中auto-height计算高度有误(一般是高于正常高度),导致小程序页面渲染出现很大问题。案例代码如下:<viewclass="content_right"v-if="editable"> <textareaplaceholder="请输入地址"......
  • 界面组件Kendo UI for Angular教程 - 构建强大的PDF阅读器(二)
    如今当用户需要处理PDF文件时,通常不得不下载应用程序或者浏览器插件,控制用户如何与PDF交互并不是一件容易的事。如果我们提供PDF作为内容,用户可以下载它并使用浏览器或PDF本身提供的控件进行交互。然而,一些企业可能希望控制用户使用PDF的方式,以提供更好的体验或在某些条件下限制下......
  • 动态渲染之vue页面向组件间传值
    ==Vue页面文件==//vue文件引入组件importceliangjulifrom"@/components/Map/celiangjuli.vue";//使用组件key:celiangMethod(任意名)<celiangjuli:celiangMethod="celiangMethod"></celiangjuli>////定义初始化valueletceliangMethod=ref();//......