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包