Vue中Vue.extend()的使用详解及说明

更新时间：2025年06月12日 10:12:33 作者：前端贾公子

这篇文章主要介绍了Vue中Vue.extend()的使用详解及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue Vue.extend()的使用

Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。

应用场景

在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。

但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
这时候，Vue.extend + vm.$mount 组合就派上用场了。

基础用法

Vue.extend( options )

参数：{Object} options
用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；data 选项是特例，需要注意：在 Vue.extend() 中它必须是函数；

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

// 结果如下：
<p>Walter White aka Heisenberg</p>

可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。

第二种写法

可以在创建实例的时候传入一个元素，生成的组件将会挂载到这个元素上，跟 $mount 差不多。

// 1. 定义一个vue模版 
let  tem ={
    template:'{{firstName}} {{lastName}} aka {{alias}}',
    data:function(){    
    return{    
	    firstName:'Walter',   
	    lastName:'White',    
	    alias:'Heisenberg'
    }
}

// 2. 调用
const TemConstructor = Vue.extend(tem) 
const intance = new TemConstructor({el:"#app"}) // 生成一个实例，并且挂载在 #app 上

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue @vuelidate父子组件绑定注意事项
Vue@vuelidate父子组件验证时,不能直接绑定,需在子组件验证方法内部进行绑定,以避免父组件验证时包含子组件的验证
2025-02-02
vueCl如何查看打包后文件的大小占比
这篇文章主要介绍了vueCl如何查看打包后文件的大小占比问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
Vue中使用装饰器的方法详解
装饰器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式,下面这篇文章主要给大家介绍了关于Vue中使用装饰器的相关资料,需要的朋友可以参考下
2022-01-01
Vue预览PDF的两种方法比较(vue-pdf-embed与pdfjs-dist)
这篇文章主要为大家详细介绍了Vue预览PDF的两种方法比较,即vue-pdf-embed与pdfjs-dist,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
2025-08-08
vue3获取url地址参数的示例详解
这篇文章主要介绍了vue3获取url地址参数,Vue3 获取地址栏参数有两个方式：查询参数和路径参数，文中结合示例代码给大家详细讲解，需要的朋友可以参考下
2023-04-04
vue的for循环使用方法
在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤，有需要的朋友们跟着学习下。
2019-02-02
vue二选一tab栏切换新做法实现
这篇文章主要介绍了vue二选一tab栏切换新做法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vuex学习之Actions的用法详解
本篇文章主要介绍了vuex学习之Actions的用法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
使用vue-virtual-scroller遇到的问题及解决
这篇文章主要介绍了使用vue-virtual-scroller遇到的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue实现一个动态添加行的表格步骤详解
在Vue组件中定义表格的数据模型,通常使用一个数组来存储表格的数据,每一行数据可以是一个对象,对象的属性对应表格的列,这篇文章主要介绍了Vue实现一个动态添加行的表格步骤详解,需要的朋友可以参考下
2024-05-05