Vue中 Vue.extend() 详解及使用

#Vue中 Vue.extend() 详解及使用| 来源: 网络整理| 查看: 265

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

1. 应用场景

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

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

这时候，Vue.extend + vm.$mount 组合就派上用场了。

2. 简单实用

2.1 基础用法

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

{{firstName}} {{lastName}} aka {{alias}}

', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point') // 结果如下： Walter White aka Heisenberg

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

2.2 第二种写法可以在创建实例的时候传入一个元素，生成的组件将会挂载到这个元素上，跟 $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 上

【本文地址】

公司简介

联系我们