当前位置: 首页 > news >正文

vue全局组件自动注册直接使用,无需单独先引用注册再使用

目录结构:

本案例是在根目录下components文件夹测试的,文件位置项目内任意,确保在main.js挂载路径正确即可

 

 1、新建文件夹(名字随意)zxy_components (放自己组件的地方)

 2、在zxy_components文件夹下

        !新建文件夹zxy_ui(放vue文件)

    !!新建index.js(放挂载全局组件的方法)

 3、自定义两个组件zxy-style.vue和zxy-button.vue

代码: 自定义组件中切记有组件名name:'组件名'

zxy-style.vue

<template><div><h1>这是我的全局组件!!!</h1></div>
</template><script>export default {name: 'zxy-style',data() {return {}},mounted() {},methods: {}}
</script><style lang="scss" scoped></style>

 zxy-button.vue

<template><div class="row button"><el-button type="primary" size="mini" @click="$emit('add')">新增</el-button><el-button type="primary" size="mini" @click="$emit('authorizeBtn')">审批</el-button><el-button type="primary" size="mini" @click="$emit('exportBtn')">导出</el-button></div>
</template><script>export default {name: 'zxy-button',data() {return {}},mounted() {},methods: {}}
</script><style lang="scss" scoped>.button {margin-bottom: 12px;}.button {margin-left: 15px;margin-top: 20px;}
</style>

4、index.js方法:

import Vue from 'vue';//自动加载 zxy_ui 目录下的 .vue 结尾的文件
const componentsContext = require.context("./zxy_ui", true, /\.vue$/)
// componentsContext 是一个函数
// componentsContext.keys() 是包含zxy_ui目录下vue文件的数组
componentsContext.keys().forEach(item => {//componentsContext(item) 是一个模块const componentConfig = componentsContext(item);// 兼容 import export 和 require module.export 两种规范const assembly = componentConfig.default || componentConfigVue.component(assembly.name, assembly) //注册当前组件
})

5、main.js挂载:

import '@/components/zxy_components';

6、页面使用:不需要引用注册

<template><div><zxy-style></zxy-style><zxy-button></zxy-button></div>
</template>

相关文章:

vue全局组件自动注册直接使用,无需单独先引用注册再使用

目录结构&#xff1a; 本案例是在根目录下components文件夹测试的&#xff0c;文件位置项目内任意&#xff0c;确保在main.js挂载路径正确即可 1、新建文件夹&#xff08;名字随意&#xff09;zxy_components (放自己组件的地方) 2、在zxy_components文件夹下 &#xff01;新建…...

【HarmonyOS】@ohos.request 上传下载的那些事儿

【关键字】 ohos.request、上传下载​ 【写在前面】 在进行HarmonyOS应用开发时&#xff0c;可能需要进行上传或下载文件功能开发&#xff0c;本文章主要进行上传下载相关功能介绍和一些注意事项及FAQ。 【上传开发步骤】 步骤1&#xff1a;上传下载接口需要申请ohos.permis…...

github版面混乱加载不出的解决办法

最近出现打开github 界面加载不成功&#xff0c;网页访问乱码&#xff0c;打开chrome的检查发现 github的github.githubassets.com 拒绝访问&#xff0c; 解法&#xff1a; 1.先打开hosts文件所在的目录C:\Windows\System32\drivers\etc 2.右键点击hosts文件-选择用记事本或者…...

dotNet 之数据库sqlite

Sqlite3是个特别好的本地数据库&#xff0c;体积小&#xff0c;无需安装&#xff0c;是写小控制台程序最佳数据库。NET Core是同样也是.NET 未来的方向。 **硬件支持型号 点击 查看 硬件支持 详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 D…...

走近ChatGPT与类似产品:原理解析与比较

目录 1. 引言1.1 技术的进步与自然语言处理1.2 ChatGPT的崭新概念 2. ChatGPT: 一览众山小2.1 GPT-3.5架构简介2.2 ChatGPT的学习与训练2.3 文本生成的工作原理 3. 市场上类似产品调研3.1 对话式人工智能产品分类3.2 文心一言3.3 讯飞星火 4. 应用前景与局限性展望4.1 ChatGPT的…...

HarmonyOS SDK开放能力,服务鸿蒙生态建设,打造优质应用体验

华为开发者大会2023&#xff08;HDC.Together&#xff09;于8月4日至6日在东莞松山湖举行&#xff0c;在HarmonyOS端云开放能力技术分论坛上&#xff0c;华为为广大开发者们介绍了HarmonyOS SDK开放能力在基础开发架构、功能特性等方面的变化之处&#xff0c;通过将常见的通用能…...

数字经济对产业结构升级和创业增长的影响(2011-2021年)

参照刘翠花&#xff08;2022&#xff09;的做法&#xff0c;对来自中国人口科学《数字经济对产业结构升级和创业增长的影响》一文中的基准回归部分进行复刻。文章从理论层面分析数字经济发展对产业结构升级、创业增长的影响及其机理&#xff0c;并利用2011-2021年中国省级面板数…...

GPT-4助力数据分析:提升效率与洞察力的未来关键技术 | 京东云技术团队

摘要 随着大数据时代的到来&#xff0c;数据分析已经成为企业和组织的核心竞争力。然而&#xff0c;传统的数据分析方法往往无法满足日益增长的数据分析需求的数量和复杂性。在这种背景下&#xff0c;ChatGPT-4作为一种先进的自然语言处理技术&#xff0c;为数据分析带来了革命…...

Zabbix6 对接飞书告警

文章目录 Zabbix对接飞书告警背景创建飞书群组Zabbix配置创建告警媒介类型创建动作用户关联飞书告警 Zabbix对接飞书告警 背景 运维 你看下他的进程是不是挂了&#xff0c;之前在9点28分有发消息的&#xff0c;这次没有发消息 哐哐哐的去看了一通&#xff0c;确实有个进程之前…...

Javascript异步编程的4种方法

你可能知道&#xff0c;Javascript语言的执行环境是"单线程"&#xff08;single thread&#xff09;。 所谓"单线程"&#xff0c;就是指一次只能完成一件任务。如果有多个任务&#xff0c;就必须排队&#xff0c;前面一个任务完成&#xff0c;再执行后面一…...

【MySQL】表的内外连接

目录 一、内连接 二、外连接 1、左外连接 2、右外连接 一、内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在开发过程中使用的最多的连接查询。 语法&#xff1a; select 字段 from 表1 i…...

详解Mysql——第一篇/连接查询

mysql的连接查询&#xff0c;相必在网上都能找到很多的教程&#xff0c;博主今天不做老话常谈&#xff0c;不走重复路线 1.建表 –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_id) – –课程编…...

uniapp获取屏幕宽度时 获取不到移动设备中内容盒子宽度

首先 &#xff1a;我使用的是uniapp vue3语法&#xff1a; 问题&#xff1a; 我出现这个问题是IOS 设备发现的&#xff0c;data.boxWidth为0 代码&#xff1a; const initCreated () > {const query uni.createSelectorQuery().in(instance.proxy);const el query.select…...

篇十二:代理模式:控制对象访问

篇十二&#xff1a;“代理模式&#xff1a;控制对象访问” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff0c…...

P1657 选书

1&#xff1a;思路&#xff1a;一看数据&#xff0c;嗯....!,爆搜嘛&#xff1f;&#xff0c;看一眼题目&#xff0c;嗯&#xff01;&#xff01;&#xff01;&#xff0c;爆搜&#xff01; 配上俺的无敌小剪枝&#xff0c;按下拿下&#xff01; 2&#xff1a;暴力枚举每个人获…...

代码随想录第46天 | 139. 单词拆分、多重背包

139. 单词拆分 确定dp数组以及下标的含义 dp[i] : 字符串长度为i的话&#xff0c;dp[i]为true&#xff0c;表示可以拆分为一个或多个在字典中出现的单词。 确定递推公式 如果确定dp[j] 是true&#xff0c;且 [j, i] 这个区间的子串出现在字典里&#xff0c;那么dp[i]一定是tru…...

Unreal View Model结合GAS使用

这个东西真的难用&#xff0c;各种问题&#xff0c;记录下 官方文档 bilibili教学 开启插件 插件开启 Viewmodel&#xff1a; build.cs内PublicDependencyModuleNames加上ModelViewViewModel 创建ViewModel类 #pragma once#include "CoreMinimal.h" #include &quo…...

Spring-Cloud-Loadblancer详细分析_2

LoadBalancerClients 终于分析到了此注解的作用&#xff0c;它是实现不同服务之间的配置隔离的关键 Configuration(proxyBeanMethods false) Retention(RetentionPolicy.RUNTIME) Target({ ElementType.TYPE }) Documented Import(LoadBalancerClientConfigurationRegistrar…...

uniapp 左右滑动切换页面并切换tab

实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换&#xff0c;并且下方内容要实现纵向滚动 &#xff0c;所以需要swiper&#xff0c;swiper-item,scroll-view组合使用 tab栏部分 <view class"tabs"><view class"tab_item" v-for&…...

FinClip 支持小程序维度域名配置;桌面端体验活动进行中

FinClip 的使命是使您&#xff08;业务专家和开发人员&#xff09;能够通过小程序解决关键业务流程挑战&#xff0c;并完成数字化转型的相关操作。不妨让我们看看在本月的产品与市场发布亮点&#xff0c;看看是否有助于您实现目标。 产品方面的相关动向&#x1f447;&#x1f…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...