9

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

插件方法
我可以全局安装插件Vue.use(MyPlugin)并在任何组件中使用插件，而无需在每个组件中导入插件。
缺点：我无法this[field]在插件方法中使用。我必须传递调用组件的实例vm才能使用这些方法。

编辑 1 - 包括扩展方法
扩展方法
我可以定义一个基本组件，其中包含将在多个其他组件中使用的所有方法，然后扩展此 BaseComponent 以创建新组件。再次，我需要传入继承组件的实例，在 BaseComponent 中使用的 this 不是指调用/继承组件。

请在下面找到类似于我使用的代码的简单示例： 

    //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
        }
    });

我的问题：

  1. 在每个组件（需要方法）中导入 mixin 文件是一种有效的方法吗？
    多处导入mixin（组件文件）是否会重复包含mixin文件的代码并增加文件大小？

  2. 将调用组件的实例vm = this作为参数传递 - 这是一个好习惯吗？将组件实例作为方法参数传递是否会导致任何效率问题？

  3. 如何绑定this (instance of the calling/inheriting component)到插件和/或 BaseComponent 中的方法，以便this引用调用/继承组件实例而不是插件/BaseComponent？

  4. 哪种方法在性能、干燥度和文件大小方面最有效？
4

1 回答 1

5

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

所以我有一个名为 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 实例，因此我将任何属性转换为绑定的，然后定义另一个属性和方法。

然后以这种方式将其加载到应用程序中：

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

您将能够通过 this.$utils 访问 HTML 中的组件（如 $utils）和 JS 中的组件

于 2016-08-13T00:27:05.847 回答