vue 对象继承_Vue - Vue.extend() 和 extends

一. 全局API：Vue.extend

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

let Com1 = Vue.extend({

template:'{{msg}}',

data(){

return {

msg:'hello world'

}

}

});

new Com1().$mount('#app');

二. 组件选项 extends(可理解为单继承，只接受一个extends)

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

let father = {

created(){

console.log('father的created()钩子')

},

data(){

return {

msg:'msg from father'

}

}

}

let child = new Vue({

el:'#app',

extends:father,

data:{

msg:'msg from child'

},

created(){

console.log('child的created钩子');

console.log(this.msg);

}

})

继承生命周期钩子

上面例子表明了extends可以继承生命周期钩子函数，接下来稍作修改。

let father = {

created(){

console.log('father的created()钩子')

},

data(){

return {

msg:'msg from father'

}

},

methods:{

say(){

console.log('hello world');

}

}

}

let child = new Vue({

el:'#app',

extends:father,

created(){

console.log('child的created钩子');

console.log(this.msg);

this.say();

}

})

继承data和methods

进一步得出结论：extends甚至还能继承data和methods(当然重写会覆盖)

extends使得组件能像面向对象变成一样便于拓展。