Vue中的组件和插件有什么区别

一个后端开发最难受的一点就是,基础不牢地动山摇,最难受的一点就是模模糊糊知道一些内容,但是真的要说是什么的时候还说不出来,总结一些基础的内容吧,算是深入学习了。

这样以后用别人的框架时候也能理解这个事不然都不明白为何有的可以this,有的直接就可以当做方法使用。导致写东西的时候处处碰壁

一、如何理解组件和插件

组件 (component): 简单来说,在vue中每一个.vue文件都可以当作一个组件

组件的优点:

(1)降低整个系统的耦合性,在保持接口不变的情况下,就比如说你创建了一个table表单,设置一些固定的入参和分页方法,很多页面如果显示table的时候写增删改查中都可以使用这同一个组件,这样就很省时间,配合代码生成器能快速的做一个table页面。

(2)调试排错方便,由于整个系统是由不同组件组合而成,当出现报错的时候,更容易确定这个错误在哪个组件内,单一的去处理这个组件中的方法就行,不用管别的内容

(3)提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以维护起来更简单,比如说谁写的这个组件谁维护,这样出了错,直接找那个人就可以也不需要这个人改改那个人改改

插件(plugin):本质上是给vue加东西,也就是一些方法,然后可以补强vue的方法

我在用插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

添加全局方法或者 property。如:vue-custom-element

添加全局资源:指令/过滤器/过渡等。如 vue-touch

通过全局混入来添加一些组件选项。如 vue-router

添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

这些内容基本都是说你安装了以后直接使用Vue.use,然后就可以使用this去调用一些内容,也可以增强VUE的方法内容。这样就能更方便的使用一些方法

二、区别

1.编写形式不同

组件

的编写方式有很多种,常见的就是一个.vue文件就可以是一个组件,包括按钮组件,表格组件,搜索组件这些内容;

插件

的编写需要暴露一个Install方法,这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象

2.注册形式不同

vue组件注册主要分为全局注册与局部注册
(1)全局注册通过Vue.component方法,第一个参数是组件的名称,第二个参数是传入的配置项

Vue.component('组件名',{  ......   })

(2)局部注册在哪里使用就在哪里引入,通过components属性注册就可以直接使用了

import 'my-component' from 'xxx/xxx/xxx'

export default {

components:{ myCom }

}
插件的注册

通过Vue.use()的方式进行注册(安装),第一个参数为插件的名字,第二个参数是可选择的配置项

Vue.use(‘插件名’,{ … })

注意:

注册插件的时候,需要在调用 new Vue() 启动应用之前完成,并且Vue.use会自动阻止多次注册相同插件,只会注册一次

3.使用场景不同

组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue,就是想用各种内容组成一个完整的用户需要页面,主要是页面上显示的东西,

插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 Vue本身,自己

你可能感兴趣的:(vue,vue.js,javascript,前端)