如何在普通 javascript 文件中使用 mixins（不是单个文件模板）

Posted 2023-02-16

【中文标题】如何在普通 javascript 文件中使用 mixins（不是单个文件模板）

【英文标题】：how to use mixins in normal javascrip file (not single file template)

【发布时间】：2020-04-02 03:21:55

【问题描述】：

在谷歌上搜索 vue mixins 时，我很惊讶有这么多关于这个主题的指南，但是所有的演示代码都使用了单个文件模板（或 vue 项目模板......）。那么如何在普通的javascript文件中使用vue mixins。我的情况是这样的： 首先，我使用 php-yii2 模板开发我的网站（包括后端和前端）。在前端，我将 vue.js 文件添加到我的项目中以使用 vue 功能。有时，有一些可以重复使用的通用函数，所以我认为 vue mixins 可以解决这些情况。在我的方法中，我将创建一个单独的 .js 文件来声明 mixins 对象，然后其他 vue 对象（在其他 .js 文件中）可以重新使用该 mixins 对象方法。 你对我的案子有什么想法吗？非常感谢。

【问题讨论】：

我不太清楚你在这里问什么。它在 SFC 外部的工作方式与在 SFC 内部的工作方式相同。您提供一个 mixins 数组作为组件选项的一部分，并且在该数组中包含 mixin。 mixin 只是一个保存组件选项的 JavaScript 对象。

【参考方案1】：

你的 mixin 定义 (some-mixin.js)：

const someMixin = 
    computed: 
        aSharedComputed() 
            // do something
        
    ,
    methods: 
        aSharedMethod(aParam) 
            // do something
        
    ,
;

export 
    someMixin,
;

在组件 (your-component.js) 中，您现在可以告诉组件您要使用此 mixin：

import  someMixin  from './some-mixin.js`; 

export default 
    name: 'SomeComponent',
    mixins: [
        someMixin
    ],

然后你就可以在你的模板中使用你在 mixin 中定义的任何东西：

<span> aSharedComputed </span>

还有代码：

methods: 
    someLocalMethod() 
        this.aSharedMethod();
        this.aSharedComputed;