我想扩展方法。例如:
Vue.extend({
data: function () {
return {
fetcData: 'Test',
}
},
methods: function(){
return {
modal: function(){ alert('Modal') },
}
}
});
Vue.extend({
....
});
我使用多个扩展。
// VueJS Instance
new Vue({
el: 'html',
data: {
effect: true
},
methods: {
xhrGet: function () {
alert(this.fetcData); // Undefined
this.modal(); // Undefined
},
xhrPost: function (event) {
alert('xhrPost')
}
}
});
错误代码: this.fetchData未定义。 this.modal不是函数
答案 0 :(得分:2)
Vue.extend
返回一个新的Vue组件定义,稍后可以使用new
关键字进行实例化,它不会更改全局Vue对象。因此,如果要创建组件层次结构,请尝试:
var BaseComponent = Vue.extend({
methods: {
foo: function() { console.log('foo') }
}
})
var MyComponent = BaseComponent.extend({
methods: {
bar: function() {
this.foo()
console.log('bar')
}
}
})
let myComponentInstance = new MyComponent()
查看fiddle的实际示例。