vue插件和组件的区别

使用插件的方式包装组件和直接注册全局组件其实是一样的，都是注册组件。不同的是，一般组件我们是作为页面的某一块结构，按需引用，但是有些应用场景你可能会用到也可能用不到，总之就是你不知道什么时候会用到，总不能在每个页面都引用吧。再一个，控制组件需要传递props，也就是说每次引用都需要写方法才能达到控制的目的。

所以一般组件就不适合轻提示、加载动画、模态框这种随时需要的功能，所以需要把组件包装成插件，直接添加到页面上（一般是插入到body），再通过在vue的原型上添加全局功能，使用自定义的方法（api）来控制组件。 vue的组件是组件，但是插件不仅仅限于组件，它也可以包装过滤器、混入、自定义指令。这就是组件和插件的区别。

插件的开发（以轻提示为例子，同时也演示过滤器、混入、自定义指令）

不存在的目录自行创建 1、首先创建一个单文件组件（src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.vue） 这就是一个普通的组件

<template>
 <transition name="fade">
    <div class="toast" v-if="show">{{message}}</div>
  </transition>
</template>

<script>
export default {
  name:'toast',
 data(){
   return {
      show:false,
     message:''
    }
 }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.toast{
  position:fixed;
 z-index:100;
  left:50%;
 top:50%;
  transform: translate(-50%,-50%);
  padding:1em 2em;
  background-color:rgba(0,0,0,.9);
  color:#FFF;
}
</style>

2、创建一个暴露install方法的模块（src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js） 这个插件包含了轻提示组件、混入、过滤、自定义指令这几个基本功能，都可以全局使用。

import toast_component from './js2-vuepluginsdemo.vue'

export default {
  //插件需要暴露一个install方法作为回调函数，接收Vue和配置参数
  install: (Vue, options) => { //options 是use时可以传递的参数
    console.log(options)

    /*
     * 定义一个全局混入，混入到所有组件中
     */
   Vue.mixin({
     methods: {
        sayhi() { //所有组件都拥有该方法
          console.log(this, 'sayhi');
       }
     },
      mounted() { //所有组件都会输出
        this.sayhi()
      }
   })

    /*
     * toast 组件插件
    */
   const component = Vue.extend(toast_component) //创建一个组件构造器
   const toast = new component({
     name:''
     data: { //可通过构造时传参初始化数据
       'js2': '我是通过构造器传递的参数'
     }
   }) //实例化组件
    toast.$mount()//$mount 如果没有参数，模板将被渲染为文档之外的的元素，必须使用原生 DOM API 把它插入文档中。
   document.body.appendChild(toast.$el)//手动插入到body
   Vue.prototype.$toast = (msg, duration = 1500) => {//在Vue的原型上创建一个方法作为全局方法，操作的是组件中的data数据
      toast.message = msg;
      toast.show = true;

      setTimeout(() => {
       toast.show = false;
     }, duration);
   }

   /*
    * 定义一个全局指令
    */
    Vue.directive('focus',{
     inserted(ele){
        ele.focus()
     }
   })

    /*
    * 定义一个全局过滤器
   */
    Vue.filter('length',value=>{
     return value.length
   })
  }
}

3、注册插件 在入口文件（main.js）中导入并注册插件：

import toast from './plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js'//导入插件
//import toast from 'js2-vuepluginsdemo'//通过npm下载的包这样引入
Vue.use(toast,{option:'我是通过use传入的参数'})//注册这个插件

4、在任何组件中都可以使用插件中的功能 在组件的mounted中调用提示：this.$toast('Welcome to Your Vue.js App',3000) 使用过滤：{{ msg | length }} 使用指令：<input type="text" v-focus>

把插件发布到npm上

进入 src/plugins/js2-vuepluginsdemo 目录，使用npm init初始化项目，注意项目名称不能和已存在的npm包相同，这就是为什么上面那个实例我把名字起得那么长的原因。 然后看这里——>发布npm包