首页 > 其他分享 >Vue 获取组件名称

Vue 获取组件名称

时间:2024-06-05 11:26:25浏览次数:19  
标签:Vue name getCurrentInstance 获取 .__ 组件 type

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 组件实例名称,但是比较复杂。



标签:Vue,name,getCurrentInstance,获取,.__,组件,type
From: https://www.cnblogs.com/chinasoft/p/18232621

相关文章

  • vue动态加载组件import引入组件找不到组件(Error: Cannot find module)
    更多ruoyi-nbcio功能请看演示系统gitee源代码地址前后端代码:https://gitee.com/nbacheng/ruoyi-nbcio演示地址:RuoYi-Nbcio后台管理系统http://218.75.87.38:9666/更多nbcio-boot功能请看演示系统 gitee源代码地址后端代码:https://gitee.com/nbacheng/nbcio-boot前端......
  • .NET控制台获取依赖注入实例
    internalclassProgram{staticvoidMain(string[]args){//创建服务集合varservices=newServiceCollection();//注入services.AddScoped<IMyService,MyService>();//配置服务ConfigureServices(serv......
  • 界面控件DevExpress WinForms的流程图组件 - 可完美复制Visio功能(二)
    DevExpressWinForms的Diagram(流程图)组件允许您复制MicrosoftVisio中的许多功能,并能在下一个WindowsForms项目中引入信息丰富的图表、流程图和组织图。P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能......
  • 交互式流程图组件DHTMLX Diagram v6.0 - 拥有更灵活的高度可定制功能
    DHTMLXDiagram库允许用几行代码构建JavaScript流程图,通过自动布局和实时编辑器,它可以更容易地将复杂数据可视化到一个整洁的层次结构中。DHTMLXDiagramv6.0版本发布,带来了众多令人兴奋的新功能和改进,使得这个JavaScript图表库更加强大和灵活。此次更新不仅增强了现有的功能......
  • 毕业设计-基于Springboot+Vue的影城管理系统的设计与实现(源码+LW+包运行)
    如需完整项目,请私信博主基于SpringBoot+Vue的影城管理系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven互联网发展至今,已经解决了很多我们解决不了的难题,使得我们工作更加便捷,提高了我们的工作效率。目前各行各业都在运用网络信......
  • 毕业设计-基于Springboot+Vue的音乐网站与分享平台 的设计与实现(源码+LW+包运行)
    如需完整项目,请私信博主基于SpringBoot+Vue的音乐网站与分享平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven互联网发展至今,已经解决了很多我们解决不了的难题,使得我们工作更加便捷,提高了我们的工作效率。目前各行各业都在运用......
  • Vue 前端页面利用MediaRecorder实现音频录制
    Don'tTalk,codeishere:重点是startRecord方法<template><div><el-tooltipclass="item"effect="dark"content="再次点击【开始录音】即为重新录制,之前录制的将被作废"placement="top"><el-button:disabled=......
  • .NET C# 程序自动更新组件
    引言本来博主想偷懒使用AutoUpdater.NET组件,但由于博主项目有些特殊性和它的功能过于多,于是博主自己实现一个轻量级独立自动更新组件,可稍作修改集成到大家自己项目中,比如:WPF/Winform/Windows服务。大致思路:发现更新后,从网络上下载更新包并进行解压,同时在WinForms应用程序中显示......
  • 从当当网批量获取图书信息
    爬取当当网图书数据并保存到本地,使用request、lxml的etree模块、csv模块保存数据到本地。爬取网页的url为:http://search.dangdang.com/?key={}&act=input&page_index={}其中{}为搜索关键字,page_index为页码。爬取的数据包括:书名、作者、出版社、图书简介、出版日期、价格......
  • Vue前端实现接收rabbitMQ及时消息 原
    https://blog.csdn.net/dawnStart/article/details/110479833打开APPVue前端实现接收rabbitMQ及时消息原创2020-12-0214:03:11阅读量1.4wAI必读dawnStart码龄4年关注Vue前端实现实时接收rabbitMQ及时消息,看了别人写的不太详细1.rabbitMQ安装Stom插件2.Vu......