Question

我试图创建一个全球可用的mixin，但不会自动注入每个组件。即我不想要这个：Vue.mixin({...});

我根据these说明设置了项目。 This是我的项目结构。我还有assets/js/mixins.js个文件，其中包含我的mixins。

我希望能够在我的个人.vue文件中执行此操作（我的许多组件都使用myMixin，但不是全部使用这些文件）：

<script>
export default {
    mixins:[myMixin],
    data:{....}
}
</script>
<template>
  <!-- some template code -->
</template>

到目前为止，唯一的方法是将此行添加到需要它的每个组件的顶部：

import {myMixin} from './assets/js/mixins.js"

但有一种方法可以执行此操作并在全局范围内提供myMixin变量吗？我已经尝试将其包含在main.js和app.vue中，但我仍然得到了＃34; myMixin未定义＆＃34;如果我尝试在任何子组件中使用myMixin，则会出错。

或者是否有另一种注册mixin的方法，并不要求我在每个组件中键入mixins.js文件的路径？

Answer 1

我建议将mixin设置为插件。为此，将其包装在函数调用install中并导出install函数。然后，只要你实例化你的应用程序，你就可以简单地做Vue.use（yourMixin）：

文件：

https://vuejs.org/guide/plugins.html

http://vuejs.org/api/#Vue-mixin

示例：

//- build your mixin
const mixin = {
  // do something
}

//- export it as a plugin
export default {
  install (Vue, options) {
    Vue.mixin(mixin)
  }
}

//- make it globally available
import myMixin from './myMixin'
Vue.use(myMixin)

Vue.use在install fn（）中调用，因此所有后续Vues（或者所有后来的Vues都没有创建）具有mixin功能

在全局可用的mixins（！）

上小心命名空间冲突

Answer 2

一些想法：

在main.js中，您可以声明window.myMixin = {...}，我相信它会在之后加载的任何组件中都可用。

编辑：如果您使用this.myMixin，这会更好，因为this将引用全局范围。这样您就不依赖window现有的，因此可以在更多环境中使用

为了不必在每个文件中声明完整路径，您可以根据Installing a local module using npm?将mixin创建为本地NPM模块。然后你可以import myMixin from 'myMixin'。这是更合适的方法，我认为，这样你仍然在每个组件中加载依赖项，只是用一些简写。

Answer 3

这是在 app.js 中全局注册 mixin 的正确方法

 Vue.mixin(myMixin);

VueJS中全球可用的混合物

3 个答案: