VueJS 扩展方法和数据
VueJS Extends Methods and Data
我想扩展方法。示例:
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 不是函数
Vue.extend
returns 一个新的 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 的实例。
我想扩展方法。示例:
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 不是函数
Vue.extend
returns 一个新的 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 的实例。