Question

我正在使用Vuejs作为前端的中型项目。我正在探索封装/分离可用于许多组件的常用方法的选项包括mixins方法和插件方法。
Mixin方法
我必须在每个我想使用mixin方法的组件（文件）中编写一个import语句。这是否会增加最终文件大小，因为mixin将在多个位置导入？我可以在mixin方法中使用this。

插件方法
我可以使用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 default MyPlugin;



    //my-component.js
    import MyMixin from './mixin';
    export default{
        template:require('./my-component-template.html'),
        mixins:[MyMixin],
        data(){
            return{
    	    name:'John Doe'
    	}
        },
        methods:{
           displayNameFromMixin(){
              console.log(this.getName()); //displays John Doe - using the mixin method.
           },
           displayNameFromPlugin(){
              console.log(this.$service.getTheName()); //error "this" references the plugin instead of the component instance
           },
           displayNameFromPluginVersion2(){
               console.log(this.$service.getTheNameVersion2(this)); //this works - passing the instance as method parameter
           }
    }   
    
    //base-component.js  
    export default{
        methods:{
            getName(vm){
                return vm.name;
            }
        }
    }   
    
//another-component.js
import BaseComponent from './base-component';
BaseComponent.extend({
    template:require('./another-component-template.html'),
    data(){
        return{
            name:'Jack Daniels';
        }
    },
    methods:{
        getNameFromBaseComponent(){
            console.log(this.getName(this)); //displays Jack Daniels - instance passed as method parameter
        }
    }
});


    //main.js

    import Vue from 'vue';
    import MyPlugin from './plugin';
    import MyComponent from './my-component';
    import AnotherComponent from './another-component';

    Vue.use(MyPlugin);

    new Vue({
        el:'body',
        components:{
            MyComponent, AnotherComponent
        }
    });

我的问题：

在每个组件中导入mixin文件（需要方法）这是一种有效的方式吗？
在多个地方（组件文件）导入mixin是否反复包含mixin文件的代码并增加文件大小？
将调用组件vm = this的实例作为参数传递 - 这是一个好习惯吗？传递组件作为方法参数的实例导致任何效率问题？
如何将this (instance of the calling/inheriting component)绑定到插件和/或BaseComponent中的方法，以便this引用调用/继承组件实例而不是插件/ BaseComponent？
哪种方法在性能，干燥度和文件大小方面最有效？

Answer 1

我更喜欢（有人认为这不是最好的方式但对我来说足够了）是创建插件。

所以我有一个名为vue-utils.js的文件，其中包含内容（例如）：

; (function () {
    var install = function(Vue, options) {
        Vue.prototype.$utils = {}

        var vm = new Vue({ data: Vue.prototype.$utils });

        Vue.prototype.$utils.validateEmail = function(value) {
            return /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(value);
        }
    }

    if (typeof exports == 'object') {
        module.exports = install;

    } else if (typeof define == 'function' && define.amd) {
        define([], function () { return install });

    } else if (window.Vue) {
        Vue.use(install);
    }
})();

我首先定义$ utils然后用它创建一个新的Vue实例，所以我将任何属性转换为binded，然后定义另一个属性和方法。

然后以这种方式在应用程序中加载它：

import VueUtils from './plugins/vue-utils.js';
Vue.use(VueUtils);

你将能够像$ utils和JS那样访问HTML中的组件。$ utils

如何在Vuejs项目中封装常用功能？最佳实践

1 个答案: