Question

我正在尝试为Vue构建插件。我的插件为每个组件都有一个自定义方法调用者customMethod，我希望它在挂载/创建页面后继续运行。以一种简单的方式，它可以按我的意愿工作，但是我无法在customMethod中访问this。

当我尝试console.log(this)时，它记录为“未定义”。

那么如何在this内部访问customMethod？

var defaultParms = Object.freeze({
	start   : function(){},
	leave   : function(){},
});



const myPlugin = {
    
    install(Vue, options = []) {
        var ref = Vue.util;
        var extend = ref.extend;

        var assets = Object.create(null);
        extend(assets, defaultParms);
        Vue.options.customMethod = assets;

        
        
        // set option merge strategy
        var strats = Vue.config.optionMergeStrategies;
        if (strats) {
            strats.customMethod = (parent, child, vm)=>{
                
                if (!child) return parent;
                if (!parent) return child;

                var ret = Object.create(null);
                extend(ret, parent);

                for (var key in child) {
                    ret[key] = child[key];
                }
                return ret
            };
        }


        Vue.mixin({
            customMethod:{
                start: function(){
                  console.log('hi') // log 'hi'
                  console.log(this.$appName)  // log 'undefined'
                }
            },
            created: function () {
                if(this.$options.customMethod){
                    this.$options.customMethod.start && this.$options.customMethod.start();
                }
            }
        });


        Vue.prototype.$appName = 'vikash';
    }

}


Vue.use(myPlugin)
new Vue().$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 1

这是上下文this在JS中的工作方式的一部分。您需要使用bind，call或apply进行设置：

this.$options.customMethod.start.call(this)

Vue optionMergeStrategies方法无法访问“ this”关键字

1 个答案: