logo头像
Snippet 博客主题

vue.extend()

本文于 393 天之前发表,文中内容可能已经过时。

1、官方例子

image-20230417002823998


2、注意点:

1、Vue.extend()必须要new出来(实例)

1
2
let Constructor = Vue.extend()
let Profile = new Constructor

2、将创建的Profile实例, 挂载到一个元素上去

1
Profile.$mount('div')

3、例子

所用到的文件plugin.js 和 MyHeader.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// plugin.js
import MyHeader from './MyHeader.vue'
const myUI = {
install (Vue, option) {
// 构造vue子类构造器
const MyHeaderConstructor = Vue.extend(MyHeader)
// 通过上面的构造器生成 MyHeaderConstructor 通过new出来的实例对象是可以直接访问组件中的属性的
const myHeaderInstall = new MyHeaderConstructor()

// 挂载实例
const ele = document.createElement('div')
document.body.appendChild(ele)
myHeaderInstall.$mount(ele)
}
}
export default myUI