Vue.extend和Vue.component

xinxin_csdn

已于 2022-12-26 11:59:09 修改

阅读量691

点赞数

文章标签： vue.js 前端 javascript

于 2022-12-26 11:48:53 首次发布

本文链接：https://blog.youkuaiyun.com/xinxin_csdn/article/details/127084958

版权

本文深入解析Vue中的关键API，包括Vue.extend用于创建自定义组件构造器的方法，Vue.use用于安装插件的方式，以及Vue.component注册全局组件的具体用法。通过这些API，开发者能够更好地管理和复用Vue组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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){
//逻辑...
}
}