vue进阶篇 - 插件

「这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战」。

上一篇简单的和大家介绍了关于main.js文件中的默认配置的内容，本期我会给大家介绍一下vue中一个特别厉害好用的东西，这个就是插件了，插件的作用相信大家也了解过的，它是用来简化我们的代码量的所以也可以理解为增强强化vue功能的东西，插件就类似于我们打游戏时候的外挂当然开挂是不合法的，但是vue中开挂是合法的，所以我们就来了解vue中的插件内容一下吧；插件本质上还是一个对象也就是{ } 的内容；

通过import的方式引入插件和vue.use的方式来应用插件，插件是可以获取参数vue的构造函数的，（注意：所有需要被引入的插件组件函数等等都想要export的方式进行对外界暴露 例如export default xxx 这种就是默认暴露其中xxx是函数名称到只要一个需要暴露时可以不需要写）

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}  
// export default  xxx

当我们用插件时候只需要入口文件也就是main.js文件中应用就可以了下面看我是如何引用的；

插件总结

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件方式：

   对象.install = function (Vue, options) {
       // 1. 添加全局过滤器
       Vue.filter(....)
   
       // 2. 添加全局指令
       Vue.directive(....)
   
       // 3. 配置全局混入(合)
       Vue.mixin(....)
   
       // 4. 添加实例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }
   

4. 使用插件：Vue.use()

插件的可塑性很大，能实现的功能很多，所以大家要仔细学习一下；