javascript - 如何使用 Vue 实例中的全局混合方法

Question

假设我遇到以下情况，使用全局混合在 Vue 中创建全局辅助方法:

import Vue from "vue";

Vue.mixin({
    methods: {
        replaceString: function (word) {
            return word.toLowerCase().replace(/\W/g, '');
        }
    }
});

let vm = new Vue({
    methods: {
        doSomething: function() {
             console.log(this.replaceString('Hello World'); //helloword
        }
    }
});

我知道我可以在其他方法内部、组件及其子项内部调用该方法。但是如何从 Vue 实例“vm”调用混合方法“replaceString”？我尝试使用“vm.replaceString”，但一直返回“undefined”。

Answer 1

对您的代码进行少量更改并且可以正常工作:

1. 你应该改变你的 mixin 的定义(var mixin 而不是 Vue.mixin)

2. 将 mixin 导入您的新 vue 组件 (mixins = [mixin])

   import Vue from "vue";
   
   var mixin = {
       methods: {
           replaceString: function (word) {
               return word.toLowerCase().replace(/\W/g, '');
           }
       }
   };
   
   let vm = new Vue({
       mixins: [mixin]
       methods: {
           doSomething: function() {
               console.log(this.replaceString('Hello World'); //helloword
           }
       }
   });