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

Posted 2023-02-16

【中文标题】vuejs 将全局 mixin 放入单独的文件中

【英文标题】：vuejs place global mixin into seperate file

【发布时间】：2021-12-21 10:36:17

【问题描述】：

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

如果 mixin 都在同一个文件中，那么它们就没有什么意义了，所以必须有某种方法可以从不同的文件中加载它们，对吧？

这是我的测试 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

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

【参考方案1】：

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

应该是：

export default ...

或者：

const mixin_test = ...
export default mixin_test;

【讨论】：

非常感谢，mixin 正在运行，但是 import 没有。只有当我在使用 mixin 的 .vue 文件中导入 .js 文件时，它才能工作。否则，当我将它导入 app.js 并在 .vue 文件中使用它时，它不会。

不客气。这就是模块的工作方式。你必须在你使用它的地方导入一个东西。