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

组件和插件的区别与联系

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单文件组件 **

<template>
  <div>I`m a Component</div>
</template>
<script>
  export default{
      data(){
          return{
              
          }
      },
    methods:{
          
    }
  }
</script>

• ** 通过template属性编写 **

<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

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属性注册一个组件

import {myComponent} from 'xxx'
export default{
    components:{
        myComponent
    }
}

3.3.2 插件的注册

• 插件的注册通过Vue.use()的方式进行安装注册，第一个参数为插件的名字第二个是options

Vue.use(PlguinName,options)

• 插件注册的时候，一定要在new Vue启动之前，而且Vue。use会阻止相同组件的重复注册