vuejs 将全局 mixin 放入单独的文件中

Question

我想创建一个位于单独文件中的全局混合。我在网上看到的所有教程总是把mixin放在同一个文件中，或者不解释如何导入另一个文件。

mixins 如果它们都在同一个文件中就没有意义，所以必须有某种方法从不同的文件加载它们，对吗？

这是我的测试mixin_test.js:

export default mixin_test = {
    
    methods: {
        test: function( msg )
        {
            console.log( msg );
        }
    }
}

在 app.js 我有以下内容：

...
import mixin_test from "./mixin_test.js";
...

在我的组件中：

export default {
    name:"something",
    
    mixins: [mixin_test],
    
    mounted(){
        this.test( "hello world" );
    }
}

如果我在网络浏览器中打开页面，我会收到错误消息：

Uncaught ReferenceError: assignment to undeclared variable mixin_test

有人知道问题出在哪里吗？

Answer 1

default 导出与命名导出不同，不需要指定名称。 default export 是一个表达式。 export default mixin_test = ... 与 console.log(mixin_test = ...) 相同，这导致分配给不存在的 mixin_test 变量。

应该是：

export default {...}

或：

const mixin_test = {...}
export default mixin_test;

vuejs 将全局 mixin 放入单独的文件中

vuejs place global mixin into seperate file

mixins

vue.js

vue-mixin