我正在尝试建立一个基础DataComponent，其中将包含处理基本CRUD实体的许多其他组件所需的通用功能。
到目前为止，我有
//main.js
import Vue from 'vue';
new Vue({
el:'#app',
components:{
DataComponent,
Quotation
}
});//data-component.js
import Vue from 'vue';
export
default Vue.extend({
data() {
return {
saved: false
}
},
methods: {
//This method will be used by all inheriting components to alert
//the user regarding any changes which need to be saved.
alertSave(entity, fields, intFields) {
var changeCount = 0;
fields.forEach(function(field) {
var compareWith = this[field];
//Here "this" need to refer to the child instance but it does not
//how can I achieve?
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
intFields.forEach(function(field) {
var compareWith = parseInt(this[field]);
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
vm.saved = changeCount <= 0;
},
//sanitizeValue method works as intended as it does not have any reference to "this"
sanitizeValue(value) {
if (value) {
return String(value).trim();
} else {
return null;
}
},
//In getDbData method also this needs to refer to the inheriting child instance
//from where this method is called - how can I achieve it?
getDbData(entity) {
if (entity) {
this.dbTextFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbIntFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbObjFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()];
});
this.dbAppendedFields.forEach(function(field) {
this[field] = entity[field.camelToSnake()]
});
this.saved = true;
}
}
});//quotation.js
import DataComponent from './data-component';
export default DataComponent.extend({
data(){
return{
id:0,
date:'',
remarks:'',
terms:'',
quote:{},
dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
dbObjFields:['inquiry', 'booking']
}
},
methods:{
setDbData(){
let entity = this.quote;
this.getDbData(entity);
//getDbData gives error as "this" in getDbData does not refer to this
// child component and so this.dbTextFields becomes undefined.
}
}
});How to achieve method inheritance as I am trying to do? Is it possible in Vue.js?
编辑
如果我如下更改data-component.js中方法的签名，并将继承组件（“ this”）的实例作为vm传递，它将起作用
//data-component.js
import Vue from 'vue';
export
default Vue.extend({
data() {
return {
saved: false
}
},
methods: {
//This method will be used by all inheriting components to alert
//the user regarding any changes which need to be saved.
alertSave(entity, fields, intFields, vm) {
var changeCount = 0;
fields.forEach(function(field) {
//var compareWith = this[field];
var compareWith = vm[field];
//Changed "this" to vm (passed as a parameter)
//how can I achieve?
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
intFields.forEach(function(field) {
//var compareWith = parseInt(this[field]);
var compareWith = parseInt(vm[field]);
if ((compareWith || entity[field.camelToSnake()]) &&
entity[field.camelToSnake()] !== compareWith) {
changeCount++;
}
});
vm.saved = changeCount <= 0;
},
//sanitizeValue method works as intended as it does not have any reference to "this"
sanitizeValue(value) {
if (value) {
return String(value).trim();
} else {
return null;
}
},
//In getDbData method also this needs to refer to the inheriting child instance
//from where this method is called - how can I achieve it?
getDbData(entity, vm) { //instance as "vm" parameter
//change all this to vm
if (entity) {
vm.dbTextFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbIntFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbObjFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()];
});
vm.dbAppendedFields.forEach(function(field) {
vm[field] = entity[field.camelToSnake()]
});
vm.saved = true;
}
}
});然后在继承组件中
//quotation.js
import DataComponent from './data-component';
export default DataComponent.extend({
data(){
return{
id:0,
date:'',
remarks:'',
terms:'',
quote:{},
dbTextFields:['to', 'org', 'address', 'items', 'description', 'quoted_by'],
dbIntFields:['quote_ref', 'quantity', 'amount', 'discount', 'total'],
dbObjFields:['inquiry', 'booking']
}
},
methods:{
setDbData(){
let entity = this.quote;
this.getDbData(entity, this);
//passing this (instance) as a parameter
}
}
});将实例（“ this”）作为vm传递给方法，它可以按预期工作。
我不确定这是否是最好的方法。但是那肯定不是继承。
如何使用继承来实现我要完成的任务？