我正在使用Vuejs作为前端的中型项目.我正在探索封装/分离可用于许多组件的常用方法的选项包括mixins方法和插件方法.
Mixin方法
我必须在每个我想使用mixin方法的组件(文件)中编写一个import语句.这是否会增加最终文件大小,因为mixin将在多个位置导入？我可以this在mixin方法中使用.
插件方法
我可以全局安装插件,Vue.use(MyPlugin)并在任何组件中使用插件,而无需在每个组件中导入插件.
缺点:我无法this[field]在插件方法中使用.我必须传递调用组件的实例vm才能使用这些方法.
编辑1 - 包括扩展方法
扩展方法
我可以定义一个基本组件,其中包含将在多个其他组件中使用的所有方法,然后扩展此BaseComponent以创建新组件.在这里,我需要传递继承组件的实例,这在BaseComponent中使用时不引用调用/继承组件.
请找到类似于我在下面使用的代码的简单示例:
//mixin.js
var MyMixin = {
methods:{
getName(){
return this.name;
}
}
};
export default MyMixin;
//plugin.js
var MyPlugin = {};
MyPlugin.install = function(Vue, options){
var service = {
getTheName(){
retrun this.name;
},
getTheNameVersion2(vm){ //here vm is the instance of the calling component passed as a parameter - is this proper way?
return vm.name;
}
}
Vue.prototype.$service = service;
};
export …