vue组件和插件的区别与联系

文章目录

  • 组件和插件的区别与联系
  • [1. 什么是组件](#1. 什么是组件)
  • [2. 什么是插件](#2. 什么是插件)
  • [3. 二者的区别](#3. 二者的区别)
    • [3.1 针对范围](#3.1 针对范围)
    • [3.2 编写形式](#3.2 编写形式)
      • [3.2.1 组件的编写](#3.2.1 组件的编写)
      • [3.2.2 插件的编写](#3.2.2 插件的编写)
    • [3.3 注册形式](#3.3 注册形式)
      • [3.3.1 组件的注册](#3.3.1 组件的注册)
      • [3.3.2 插件的注册](#3.3.2 插件的注册)

组件和插件的区别与联系

1. 什么是组件

  • 组件就是把图形或者非图形的各种逻辑抽象为一个统一的概念来实现复用,这个概念就是组件,在vue中,每一个.vue文件都可以视为一个组件
  • 组件具有以下优势
  1. 降低系统的耦合度,在保持接口不变的情况下,替换不同的组件,完成不同的功能
  2. 方便调试,应用是由很多的组件组合而成的,哪个组件除了问题问题可以快速定位到
  3. 提高维护性,组件功能抽象且单一,可以被复用,可以通过代码优化实现系统的优化

2. 什么是插件

  • 插件是针对VUe本身,而不是我们的项目,目的是为了扩展VUE的全局功能
  • 可以有以下类型的插件
  1. 添加全局方法或者属性,比如vue-custom-elemtn
  2. 添加全局资源:指令、过滤器、过度等,如vue-touch
  3. 通过全局混入来添加一些组件的选项,比如vue-router
  4. 添加VUe实例方法,通过把他们添加到Vue.property上实现

3. 二者的区别

3.1 针对范围

  • 组件一般针对具体的项目而言,插件针对VUE本身

3.2 编写形式

3.2.1 组件的编写

  • 我们可以使用vue单文件的形式,也可使用template属性来编写
  • ** vue单文件组件 **
vue 复制代码
<template>
  <div>I`m a Component</div>
</template>
<script>
  export default{
      data(){
          return{
              
          }
      },
    methods:{
          
    }
  }
</script>
  • ** 通过template属性编写 **
vue 复制代码
<template id="myComponent">
  <div>I`m a Component</div>
</template>
Vue.component('componentA',{
    template:'#myComponentt'
    template:'<div>I`m a Component</div>'//如果组件内容少,可以直接在行内写
})

3.2.2 插件的编写

  • vue插件的视线应该暴露一个install方法,第一个参数为vue构造器,第二个参数为options
js 复制代码
Plugin.install=function (Vue,options){
    //1. 添加全局方法或者属性
    Vue.MyGlobalMethod=function(){
        
    }
    // 2. 添加全局资源
    Vue.directive('my-directive',{
        bind(){}
    })
    // 3. 注入组件的选项
    Vue.mixin({
        create(){
            
        }
    })
    // 4. 添加实力方法
    Vue.prototype.$myMethod=function (){
        
    }
}

3.3 注册形式

3.3.1 组件的注册

  • 组件的注册分为全局组件注册和局部组件注册
  • 全局组件注册通过Vue.component(componentName,options)
  • 局部注册只需要在用到的地方通过components属性注册一个组件
js 复制代码
import {myComponent} from 'xxx'
export default{
    components:{
        myComponent
    }
}

3.3.2 插件的注册

  • 插件的注册通过Vue.use()的方式进行安装注册,第一个参数为插件的名字第二个是options
js 复制代码
Vue.use(PlguinName,options)
  • 插件注册的时候,一定要在new Vue启动之前,而且Vue。use会阻止相同组件的重复注册
相关推荐
GIS之路17 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千20 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴25 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥29 分钟前
HTML之表单结构全解析
前端·html
qq_5895681038 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记40 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript