vue 自定义插件

忘是亡心i 2021-07-24 16:58 552阅读 0赞

插件作用:
        (1)添加全局方法或者 property。如：vue-custom-element	
        (2)添加全局资源：指令/过滤器/过渡等。如 vue-touch
        (3)通过全局混入来添加一些组件选项。如 vue-router
        (4)添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
        (5)一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
    
    
    1、使用:
    	Vue.use(对象,{传递参数});  对象必须提供.install方法
    	
    	(1)实质是:调用对象.install(Vue)
    	(2)在new Vue()之前使用
    	(3)会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。
    
    1.5、Node等环境使用插件必须显示调用:
    	官方提供的一些插件(例如 vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()。
    	然而在像CommonJS这样的模块环境中,var Vue = require('vue')
    	var Vue = require('vue')
    	var VueRouter = require('vue-router')
    	
    	Vue.use(VueRouter)	不要忘了调用此方法
    	
    	
    2、语法
    let x={
    	install:function(Vue,传递参数)
    	{
    		1. 添加全局方法或 property
    		  Vue.myGlobalMethod = function () {
    		    ...
    		  }
    		2. 添加全局指令
    		  Vue.directive('my-directive', {
    		    bind (el, binding, vnode, oldVnode) {
    		      ...
    		    }
    		    ...
    		  })
    		3. 混入
    		  Vue.mixin({
    		    created: function () {
    		     ...
    		    }
    		    ...
    		  })
    		4. 添加实例方法
    		  Vue.prototype.$myMethod = function (methodOptions) {
    		    ...
    		  }
    		  
    		如:自定义一个组件,并挂载到html上
    			1、import导入组件
    			
    				该组件不具有$mount和$el方法,无法获取到组件dom并挂载到html
    				
    			2、Vue.extend(组件对象),返回组件构造器
    			
    				Vue.extend(),接收一个组件对象作为参数,返回其构造器
    				
    			3、通过new 返回的构造器,获取到组件实例
    			
    				(1)这时的组件实例具有了$mount和$el方法
    				(2)Vue实例在实例化时没有收到el选项,则它处于“未挂载”状态,没有关联的 DOM 元素,所以$el为undefined
    				(3)$mount手动地挂载一个未挂载的实例
    				
    			4、组件实例.$mount(选择器/dom对象),将组件挂载到dom对象上
    			
    				实例.$mount(),会替换挂载的dom对象,所以不能直接用html内已有对象,
    				document.createElement创建一个任意dom或者不传参数(即文档之外的的元素)即可
    			
    			5、将组件的dom元素,插入到html内
    				document.body.appendChild(实例.$el)
    				
    				此时组件已经被插入到了html内
    			
    			6、将该组件放在Vue原型上，使得在项目内任意位置可调用该实例及其内部属性/方法
    				Vue.prototype.$x=组件实例
    			
    	}
    	
    }

代码示例:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src='js/vue.js'></script>
    	</head>
    	<body>
    		<div id='app'> 
    			
    			//使用插件内的指令、方法、变量
    			<div v-my-directive >
    				{ { this.$my()}}
    			</div>
    			
    			{ { this.$color}}
    			
    		</div>
    		<script>
    
    			let lcPlugin={ 
    				install:function(Vue)
    				{ 
    					console.log('安装插件')
    					//添加全局方法
    					Vue.myGlobalMethod=function(){ 
    						console.log(1);
    						document.body.style.color='red';
    					};
    					//添加全局属性
    					Vue.prototype.$color='red';
    					//添加全局指令
    					Vue.directive('my-directive',{ 
    						bind(el,binding,vnode,oldnode){ 
    							
    							el.innerHTML='哈哈';
    						}
    					});
    					//注入混合属性
    					Vue.mixin({ 
    						created:function(){ 
    							console.log('生命周期');
    						}
    					});
    					//添加示例对象方法
    					Vue.prototype.$my=function(){ 
    						console.log(this);
    						console.log(2);
    						Vue.myGlobalMethod()
    					}
    					
    					//自定义插件,Toast为import导入的组件
    					
    					//创建组件构造器
    				    let Profile=Vue.extend(Toast);
    				
    				    //创建组件对象,具有了$el获取组件内部dom
    				    let toast=new Profile()
    				    console.log(toast);
    				    //将组件对象挂载到任意元素,不能是文档流已有元素,因为会替换
    				    toast.$mount(document.createElement('div'));
    				    
    				    //会替换挂载的元素,所以$el为当前组件dom
    				    document.body.appendChild(toast.$el)
    				
    				    Vue.prototype.$toast=toast;
    					
    				}
    			}
    			
    			Vue.use(lcPlugin);
    			
    			let app=new Vue({ 
    				el:'#app'
    			})
    			
    
    		</script>
    	</body>
    </html>