page contents

手写 Vue.extend 实现

轩辕小不懂 发布于 2021-12-24 13:53
阅读 445
收藏 0
分类:WEB前端开发
2732
Nen
Nen
- 程序员

//  src/global-api/initExtend.js

import { mergeOptions } from "../util/index";

export default function initExtend(Vue) {

  let cid = 0; //组件的唯一标识

  // 创建子类继承Vue父类 便于属性扩展

  Vue.extend = function (extendOptions) {

    // 创建子类的构造函数 并且调用初始化方法

    const Sub = function VueComponent(options) {

      this._init(options); //调用Vue初始化方法

    };

    Sub.cid = cid++;

    Sub.prototype = Object.create(this.prototype); // 子类原型指向父类

    Sub.prototype.constructor = Sub; //constructor指向自己

    Sub.options = mergeOptions(this.options, extendOptions); //合并自己的options和父类的options

    return Sub;

  };

}

请先 登录 后评论