vue中extend、mixins、extends的区别
extendextend使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件对象。类似于类中的继承概念(我上篇文章中已提及,此处省略)mixins可以混入多个,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。同名钩子函数将合并为...
·
extend
extend使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件对象。类似于类中的继承概念(我上篇文章中已提及,此处省略)
mixins
可以混入多个,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
// mixins示例
var mixinA = {
created: function () { console.log(1) }
}
var mixinB = {
created: function () { console.log(2) }
}
var vm = new Vue({
created: function () { console.log(3) },
mixins: [mixinA ,mixinB ]
})
//依次打印出 1 2 3
extends
声明扩展另一个组件(可以是一个简单的选项对象或构造函数)无需使用 Vue.extend。这主要是为了便于扩展单文件组件。和 mixins 类似。但extends只能继承一个
var otherComp= { ... }
// 继承 otherComp
var comp = {
extends: otherComp,
...
}
总结:都是为了拓展组件的功能,优先级extend>extends>mixins
更多推荐
已为社区贡献2条内容
所有评论(0)