Vue extends 传入构造函数

今天同事问我"官网上说 extends 可以传构造函数, 知不知道怎么写?"

查阅了一下官网, 发现对此的介绍仅限于"可以是一个构造函数", 此外并没有案例
于是在此写下 demo, 减轻同事摸脑壳的烦恼

官网介绍

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件。

extends 用于扩展组件, 用法与 mixins 相似, 都是在一个组件中传入扩展的内容

而 extends 与 mixins 的差别在于

• extends 只能传入 1 个扩展内容(mixins 通过数组格式, 可以传入多个)
• 除了 mixins 也接受的 Object 类型(严格来说是 Object 组成的数组), extends 还能接受构造函数类型

demo

既然说好是构造函数, 那格式肯定是这样的

{
	extends: new function() {
		this.name = value
	}
}

反复几次试验后, 发现 name 指代组件的属性名, value 指代该属性的值

实际应用大致如下例所示

var CompA = {
	extends: new function() {
		this.template = "<div>{{e}}, {{c}}</div>"
		this.data = function() {
			return {
				e: "来自 extends 传入的构造函数中的数据"
			}
		}
		this.created = function() {
			console.log("来自 extends 传入的构造函数中的 created")
		}
	},
	data: function() {
		return {
			c: "来自 CompA 自己的数据"
		}
	},
	created() {
		console.log("来自 CompA 自己的 created")
	},
};

当然这种小问题, 大佬是一眼识破的, 记录下来仅为防止笔者一时失忆

end