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 上

总结

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