Vue - 组件注册及其原理

news2024/9/28 11:16:35
1 Vue组件注册

Vue中注册组件的方式有两种:全局注册局部注册

2 局部注册

import HelloWorld from 'xxx/xxx'
export default {
    components: {
        HelloWorld
    }
}

3 全局注册

3.1 全局组件挂载
  • 示例一:
/** src/main.js */
// 表格动态列组件
import DynamicColumn from '@/components/DynamicColumn'
Vue.component('DynamicColumn', DynamicColumn)
//页面(Page.vue)中使用
 <DynamicColumn
       v-for="(ite, index) in columns"
       :key="index"
       :item="ite"
       :data-list="infoList"
 />

infoList: [],
columns: this.$columns.getColumns('investmentDecision_list'),

关于表格动态列组件的封装,可以看我的另一篇博客:Vue - 基于Element UI封装一个表格动态列组件。

  • 示例二:
/** src/main.js */
import plugins from './plugins' 
Vue.use(plugins) //安装插件

Vue.use详见:https://cn.vuejs.org/api/application.html#app-use
在这里插入图片描述
提供一个带 install() 方法的对象:
在这里插入图片描述

//页面(Page.vue)中使用
this.$modal.msgSuccess('同步成功')

4 Vue组件注册原理

推荐阅读大佬的掘金文章:
源码分析 Vue组件注册(全局注册与局部注册)(上)
源码分析 Vue组件注册(全局注册与局部注册)(下)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1323464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

mysql 22day 对表格的增删改查、对数据的增删改查、对内容进行操作

目录 mysql 配置文件授权 远程链接 &#xff08;grant&#xff09;数据库操作创建库&#xff08;create&#xff09;切换数据库&#xff08;use&#xff09;查看当前所在库 表操作创建一张员工表查看表结构修改表名称增加字段修改字段名&#xff08;ALTER &#xff09;修改字段…

Floyd求最短路(Floyd算法)

参考&#xff1a;约会怎么走到目的地最近呢&#xff1f;一文讲清所有最短路算法问题-CSDN博客 有4个城市8条路&#xff0c;公路上的数字表示这条公路的长短&#xff0c;并且路是单向的&#xff0c;现在要求我们求出任意两个城市之间的最短路程&#xff0c;也就是求任意两个点之…

MIT18.06线性代数 笔记1

文章目录 方程组的几何解释矩阵消元乘法和逆矩阵A的LU分解转置-置换-向量空间R列空间和零空间求解Ax0主变量 特解求解Axb可解性和解的结构线性相关性、基、维数四个基本子空间矩阵空间、秩1矩阵和小世界图图和网络复习一 方程组的几何解释 线性组合&#xff1a; 找到合适的x和…

GitHub 如何修改 Fork from

如果你的仓库上面是 Fork from 的话&#xff0c;我们有什么办法能够取消掉这个 Fork from&#xff1f; 解决办法 GitHub 上面没有让你取消掉 Fork 的办法。 如果进入设置&#xff0c;在可见设置中也没有办法修改仓库的可见设置选项。 唯一的解决办法就是对你需要修改的仓库先…

透视数据:数据可视化工具的多重场景应用

数据可视化工具已经成为了许多领域中的重要利器&#xff0c;它们在各种场景下发挥着重要作用。下面我就以可视化从业者的角度简单谈谈数据可视化工具在不同场景下的应用&#xff1a; 企业数据分析与决策支持 在企业层面&#xff0c;数据可视化工具被广泛应用于数据分析和决策…

蓝牙键盘怎么连接电脑?正确操作步骤分享!

“由于我经常需要用到电脑&#xff0c;为了方便&#xff0c;我新买了一个蓝牙键盘&#xff0c;但是我不知道应该如何把这个蓝牙键盘连接上电脑&#xff0c;有没有朋友可以分享方法呀&#xff1f;” 在数字化时代&#xff0c;蓝牙设备已经成为了我们生活中不可或缺的一部分。其中…

spark介绍及简单使用

简介 Spark是由加州大学伯克利分校AMPLab&#xff08;AMP实验室&#xff09;开发的开源大数据处理框架。起初&#xff0c;Hadoop MapReduce是大数据处理的主流框架&#xff0c;但其存在一些限制&#xff0c;如不适合迭代算法、高延迟等。为了解决这些问题&#xff0c;Spark在20…

Hutool--DFA 敏感词工具类

使用hutool的dfa工具类可以很好的帮助我们来实现敏感词过滤的功能&#xff0c;下面从用例入手来逐步地去j简单了解一下dfa工具类。 字典树 DFA算法的核心是建立了以敏感词为基础的许多敏感词树&#xff08;字典树&#xff09;。 它的基本思想是基于状态转移来检索敏感词。 字…

AI 绘画 | Stable Diffusion 去除照片马赛克

前言 本篇文章教会你如何让几秒钟去除图片中的马赛克,还是依托于Stable Diffusion WEB UI的强大扩展插件ControlNet,快来学起来吧,如果有问题请在评论区留言。 教程 选择大模型 首先在图生图,选择一个写实风格的大模型(我这里选择是majicMIX realistic 麦橘写实_v7.saf…

Apache RocketMQ 5.0 腾讯云落地实践

Apache RocketMQ 发展历程回顾 RocketMQ 最早诞生于淘宝的在线电商交易场景&#xff0c;经过了历年双十一大促流量洪峰的打磨&#xff0c;2016年捐献给 Apache 社区&#xff0c;成为 Apache 社区的顶级项目&#xff0c;并在国内外电商&#xff0c;金融&#xff0c;互联网等各行…

内网渗透测试基础——内网信息收集

内网渗透测试基础——内网信息收集 在内网渗透测试环境中&#xff0c;有很多设备和防护软件&#xff0c;例如Bit9、ArcSight、Maniant等。它们通过收集目标内网的信息&#xff0c;洞察内网网络拓扑结构&#xff0c;找出内网中最薄弱的环节。信息收集的深度&#xff0c;直接关系…

Java 数据结构篇-实现堆的核心方法与堆的应用(实现 TOP-K 问题:最小 k 个数)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 堆的说明 2.0 堆的成员变量及其构造方法 3.0 实现堆的核心方法 3.1 实现堆的核心方法 - 获取堆顶元素 peek() 3.2 实现堆的核心方法 - 下潜 down(int i) 3.3 实…

C/C++ 使用 MySQL API 进行数据库操作

C/C 使用 MySQL API 进行数据库操作 一、前言 随着信息时代的到来&#xff0c;数据库的应用日益广泛&#xff0c;MySQL 作为开源的关系型数据库管理系统&#xff0c;被广大开发者所喜爱。在 C/C 程序中&#xff0c;我们可以通过 MySQL 提供的 API 接口来连接数据库&#xff0…

研发管理-代码管理篇

前言&#xff1a; 工作了这些年&#xff0c;工作了三家公司&#xff0c;也用过主流的代码管理平台&#xff0c;比如SVN&#xff0c;git系列&#xff08;gitlib,gitee&#xff09;,各有优点&#xff0c;我个人比较喜欢SVN&#xff0c;多人协作的代码管理难免会有代码冲突&#…

【算法】红黑树

一、红黑树介绍 红黑树是一种自平衡二叉查找树&#xff0c;是在计算机科学中用到的一种数据结构&#xff0c;典型的用途是实现关联数组。 红黑树是在1972年由Rudolf Bayer发明的&#xff0c;当时被称为平衡二叉B树&#xff08;symmetric binary B-trees&#xff09;。后来&am…

【C语言】SCU安全项目2-BufBomb

目录 关键代码解读&#xff1a; getxs() getbuf() test() 核心思路 具体操作1 具体操作2 前段时间忙于强网杯、英语4级和一些其他支线&#xff0c;有点摸不清头绪了&#xff0c;特别是qwb只有一个输出&#xff0c;太过坐牢&#xff0c;决定这个安全项目做完后就继续投身…

LED恒流调节器FP7126:引领LED照明和调光的新时代(调光电源、汽车大灯)

目录 一、FP7126概述 二、FP7126功能 三、应用领域 随着科技的进步&#xff0c;LED照明成为了当代照明产业的主力军。而在LED照明的核心技术中&#xff0c;恒流调节器是不可或缺的组成部分。今天&#xff0c;我将为大家介绍一款重要的恒流调节器FP7126&#xff0c;适用于LED…

useConsole的封装,vue,react,htmlscript标签,通用

之前用了接近hack的方式实现了console的封装&#xff0c;目标是获取console.log函数的执行&#xff08;调用栈所在位置&#xff09;所在的代码行数。 例如以下代码&#xff0c;执行window.mylog(1)时候&#xff0c;console.log实际是在匿名的箭头函数()>{//这里执行的} con…

基础知识回顾:安装 NGINX 开源版和 NGINX Plus

原文作者&#xff1a;Robert Haynes of F5 原文链接&#xff1a;基础知识回顾&#xff1a;安装 NGINX 开源版和 NGINX Plus 转载来源&#xff1a;NGINX 中文官网 NGINX 唯一中文官方社区 &#xff0c;尽在 nginx.org.cn 如今&#xff0c;NGINX 仍然是全球最受欢迎的 web 服务器…

【nice-slam】基于RGB-D类型SLAM的定位与重建(史上最详细nice-slam资料汇总)

【NICE-SLAM】基于RGB-D类型SLAM的定位与重建 1. 总结2. 论文2. 1 算法核心流程小姐2.2 论文摘要2.3 Dataset result2.3.1 Replica Dataset result2.3.2 ScanNet Dataset result2.3.3 Multi-room Apartment result2.3.4 Co-fusion Dataset (Robustness to Dynamic Objects) res…