Vue.extend()

2020-02-29  本文已影响0人  ZH彪

官方例子:

image.png

注意点:

  1. Vue.extend()必须要new出来(实例)
    let Constructor = Vue.extend()
    let Profile = new Constructor

  2. 将创建的Profile实例, 挂载到一个元素上去
    Profile.$mount('div')

例子

所用到的文件plugin.js 和 MyHeader.vue
在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

上一篇 下一篇

猜你喜欢

热点阅读