javascript - 如何使用 Vue 实例中的 Global Mixin 方法

Question

假设我有以下情况，使用一个 Global Mixin 用 Vue 创建一个全局 helper 方法：

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”中调用 mixin 方法“replaceString”呢？我尝试使用“vm.replaceString”，但一直返回“未定义”。

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

Answer 2

我认为这个代码块是你正在寻找的：

var mixin = {
methods: {
foo: function () {
  console.log('foo')
},
   conflicting: function () {
      console.log('from mixin')
   }
 }
}

var vm = new Vue({
  mixins: [mixin],
methods: {
  bar: function () {
  console.log('bar')
  },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

从文档