vue2-组件和插件的区别

1、组件是什么?
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在vue中每一个.vue文件都可以被视为一个组件。
组件的优势:
降低整个系统的耦合度,在保持接口不变的情况下,可以替换不同的组件完成需求,例如输入框,可以替换为日历,时间,范围等组件做具体实现
调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件低耦合,职责单一,所以逻辑会比分析整个系统要简单。
提高可维护性,由于每个组件职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级。

2、插件是什么?
插件通常用来为Vue添加全局功能,插件的功能范围没有严格的限制,一般分为以下几种:
添加全局方法或者属性,如vue-custom-element
添加全局资源:指令/过滤器/过渡等。如vue-touch
通过全局混入来添加一些组件选项。如vue-router
添加vue实例方法,通过把它们添加到Vue.prototype上实现
一个库,提供自己的API,同时提供上面的一个或多个功能。如vue-router

3、两者的区别
两者的区别主要体现在以下几个方面:
编写形式
注册形式
使用场景
编写形式
编写组件
编写一个组件,可以有很多方式,常见的是vue单文件的这种格式,每一个.vue文件都可以被看成是一个组件
vue文件标准格式
在这里插入图片描述
此外,还可以通过template属性来编写一个组件,如果组件内容多,可以在外部定义template组件内容,如果组件内容不多,可以直接写在template属性上。
在这里插入图片描述
编写插件
vue插件的实现应该是暴漏一个install方法,这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象。
在这里插入图片描述

注册形式
组件注册
vue组件注册主要分为全局注册和局部注册
全局注册通过vue.component方法,第一个参数为组件名称,第二个参数为传入的配置项。
在这里插入图片描述
局部注册只需要在用到的地方通过components属性注册一个组件
在这里插入图片描述
插件注册
插件的注册通过vue.use()的方式进行注册(安装),第一个参数为插件的名字,第二个参数是可选择的配置项。
在这里插入图片描述
值得注意的事:
注册插件的时候,需要在调用new Vue()启动应用之前完成
vue.use()会自动阻止多次注册相同插件,只会注册一次

4、使用场景
组件(coponent)是用来构建app的业务模块,它的目标是app.vue

插件(plugin)是用来增强你的技术栈的功能模块,它的目标是vue本身。

简单来说,插件就是对vue的功能的增强和补充。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt QThread的moveToThread方法使用

Qt线程简介 从 Qt4.4 版本之后,因为 QThread 的 run 方法创建新线程这样实现与 Qt 设计的理念不符,Qt 主推使用 moveToThread 方法来创建新线程。QThread 应该被看做是操作系统线程的接口或控制点,而不应该包含需要在新线程中运行的代码。需…

kodi 电视遥控器 不起作用 ,无法唤醒视频OSD

最近电视盒子上安装了kodi播放器,但是安装好之后,盒子本身的遥控器就不起作用了,之前看网络上其他的文章,需要重新安装tv 控制器,重新映射,比较麻烦,而且观看视频的时候没办法唤起OSD切换字幕和…

在美国,信用分数超过800,这是一个很好的分数吗?

超过800的信用评分被认为是极好的,而且这确实是可以实现的。事实上,美国有很多人的信用评分都在这个范围内。 信用评分是一个数字化的表示,反映了一个人的信用值得信赖度,贷款机构用它来评估这个人偿还债务的可能性。最广泛使用的…

PyCharm安装使用2023年教程,PyCharm与现流行所有编辑器对比。

与PyCharm类似的功能和特性的集成开发环境(IDE)和代码编辑器有以下几种: Visual Studio Code(VS Code):由Microsoft开发,VS Code是一个高度可定制和可扩展的代码编辑器。它支持多种编程语言&am…

为什么list.sort()比Stream().sorted()更快?

真的更好吗&#xff1f; 先简单写个demo List<Integer> userList new ArrayList<>();Random rand new Random();for (int i 0; i < 10000 ; i) {userList.add(rand.nextInt(1000));}List<Integer> userList2 new ArrayList<>();userList2.add…

ORA-48913: Writing into trace file failed, file size limit [50000000] reached

检查某环境的alert_orcl1.log时&#xff0c;发现有很多的ORA-48913报错&#xff0c;细节如下 Sat Jul 22 19:34:04 2023 Non critical error ORA-48913 caught while writing to trace file "/u01/app/oracle/diag/rdbms/orcl/orcl1/trace/orcl1_dw00_138010.trc" E…

LeetCode 热题 100 JavaScript--108. 将有序数组转换为二叉搜索树

给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不超过 1 」的二叉树。 提示&#xff1a; 1 < nums.length < 104 -104 < n…

C#利用自定义特性以及反射,来提大型项目的开发的效率

在大型项目的开发过程中&#xff0c;需要多人协同工作&#xff0c;来加速项目完成进度。 比如一个软件有100个form&#xff0c;分给100个人来写&#xff0c;每个人完成自己的Form.cs的编写之后&#xff0c;要在Mainform调用自己写的Form。 如果按照正常的Form form1 new For…

摄像头电池组和平衡车电池组

摄像头电池组 Wh~是电量 Wh V*Ah 毫安(mA)~是电流 电量是9.62Wh&#xff0c;电压是 3.7v 9.62 wh / 3.7v 2.6 Ah 2600mAH 4个并联电池&#xff1a;10400mAH / 4 2600mAH PH2.0mm-2Pins 平衡车 72 wh / 36v 2 Ah 2000mAH 对比自己买的单粒电池 vs 摄像头和平衡车的 …

云安全攻防(四)之 云原生技术

云原生技术 容器技术 容器与虚拟化 虚拟化&#xff08;Virtualization&#xff09;和容器&#xff08;Container&#xff09;都是系统虚拟化的实现技术&#xff0c;可实现系统资源的”一虚多“共享。容器技术可以理解成一种”轻量的虚拟化“方式&#xff0c;此处的”轻量“主…

JNI之Java实现远程打印

打印机是最常见的办公设备了。一般情况下如果需要实现打印&#xff0c;可通过前端print.js包来完成。但是&#xff0c;如果要实现智能办公打印&#xff0c;就可以使用JNI技术、封装接口、远程调用实现完成。 导包 jacob&#xff1a;Java COM Bridge <dependency><g…

vim粘贴内容格式混乱解决方法

问题 复制本地文件内容后&#xff0c;咱贴到vim文本内&#xff0c;格式错乱 解决方法 打开vim配置文件 最后面加入一行 vim /etc/vimrc set pastetoggle<F11> 开发vim文件&#xff0c;进入后先按F11进入交互模式 shift insert 再次粘贴 解决

原型模式(C++)

定义 使用原型实例指定创建对象的种类&#xff0c;然后通过拷贝这些原型来创建新的对象。 应用场景 在软件系统中&#xff0c;经常面临着“某些结构复杂的对象”的创建工作;由于需求的变化&#xff0c;这些对象经常面临着剧烈的变化&#xff0c;但是它们却拥有比较稳定一致的…

SpringCloud Gateway获取请求响应body大小

前提 本文获取请求、响应body大小方法的前提 : 网关只做转发逻辑&#xff0c;不修改请求、相应的body内容。 SpringCloud Gateway内部的机制类似下图&#xff0c;HttpServer&#xff08;也就是NettyServer&#xff09;接收外部的请求&#xff0c;在Gateway内部请求将会通过Htt…

外部排序算法总结

一.内排总结 在之前博客里&#xff0c;博主已经介绍了各种内部排序算法的原理和C语言代码实现&#xff0c;不懂的朋友可以在同系列专栏里选择查看&#xff0c;今天介绍常见排序算法的最后一点&#xff0c;也就是外部排序。在此之前&#xff0c;我们先对外部排序的各种算法做一…

高翔《自动驾驶中的SLAM技术》代码详解 — 第6章 2D SLAM

目录 6.2 扫描匹配算法 6.2.1 点到点的扫描匹配 6.2 扫描匹配算法 6.2.1 点到点的扫描匹配 // src/ch6/test_2dlidar_io.cc // Created by xiang on 2022/3/15. // #include <gflags/gflags.h> #include <glog/logging.h> #include <opencv2/highgui.hpp>…

Redis—全局命令

Redis—全局命令 &#x1f50e;get / set&#x1f50e;常用全局命令keysexistsdelexpirettlkey 的过期策略type Redis 官网 Redis 中的命令不区分大小写 进入 Redis 客户端 redis-cli -h Redis 服务器的 IP 地址 -p Redis 服务器的端口号省略 -h 表示 Redis 服务器的 IP 地址…

OKR管理策略:为开发团队注入动力

引言 在这个快速变化的世界中&#xff0c;公司需要迅速应对市场变化&#xff0c;并保持其目标和战略的清晰性和一致性。而OKR&#xff08;Objectives and Key Results&#xff09;正是这个挑战的解决方案之一。OKR的实施可以帮助开发团队明确目标&#xff0c;关注关键结果&…

powershell几句话设置环境变量

设置环境变量比较繁琐&#xff0c;现在用这段话&#xff0c;在powershell中就可以轻松完成。 $existingPath [Environment]::GetEnvironmentVariable("Path", "Machine") $newPath "C:\Your\Path\Here"if ($existingPath -split ";"…

DSP学习笔记

一个汇编语句包含4个固定顺序的区域&#xff1a;标号&#xff08;必须从第一列开始 不能空格&#xff0c;后面可以有&#xff1a;也可以没有&#xff09; 助记符 操作数 注释&#xff08;用分号或者星号来注释&#xff09;伪指令用.开头&#xff0c;注释可以用第一列开始写&…