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

Posted 2023-02-16

【中文标题】如何使用 Vue 实例中的 Global Mixin 方法

【英文标题】：How can I use a Global Mixin method from a Vue instance

【发布时间】：2019-07-09 23:29:43

【问题描述】：

假设我有以下情况，使用一个全局的 Mixin 用 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”中调用 mixin 方法“replaceString”呢？ 我尝试使用“vm.replaceString”，但一直返回“未定义”。

【问题讨论】：

它在文档中说您可以将其转换为组件，因此您只需导入并使用它。查看文档：vuejs.org/v2/guide/mixins.html

【参考方案1】：

我认为这个代码块就是你要找的：

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"

来自docs

【参考方案2】：

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

您应该更改 mixin 的定义（var mixin 而不是 Vue.mixin）

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