一、Vue.extend({})
简述:使用vue.extend返回一个子类构造函数,也就是预设部分选项的vue实例构造器。后可使用vue.component进行实例化、或使用new extendName().$mount(''+el)
方式进行实例化(从而实现模拟组件)。
// 创建一个构造器
const Constructor = Vue.extend(test);
// 利用构造函数创建实例
//创建过程中可 向组件中传入数据
const marker= new Constructor({
propsData:{
name:'123'
}
});
// 挂载到某个dom上 ,$el指向当前组件template模板中的根标签
marker.$mount(document.createElement('div')).$el
二、Vue.use(plugin)
用法: 安装Vue.js插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,他会被作为install方法。install方法调用时,会将Vue作为参数传入
该方法需要在调用new Vue()之前调用
当install方法被同一个插件多次调用时,插件只会被安装一次
三、Vue.component(id,[definition]):
当我们想好多地方要是用到同一个组件,又不想每次都在局部注册时,可以在main.js 中全局注册
用法:注册或获取全局组件。
Vue.use(plugin)的初始化方法{install:function(){}}里面可以一次性注册多个组件。 Vue.component只能一个一个注册。 install可以做更多的事情 MyPlugin.install=function(Vue,options){ //1.添加全局方法或属性 Vue.myGlobalMethod=function(){ //逻辑... } //2.添加全局资源 Vue.directive('my-directive',{ bind(el,binding,vnode,oldVnode){ //逻辑... } ... }) //3.注入组件选项 Vue.mixin({ created:function(){ //逻辑... } ... }) //4.添加实例方法 Vue.prototype.$myMethod=function(methodOptions){ //逻辑... } }