6

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

我根据这些说明设置了项目。这是我的项目结构。我那里也assets/js/mixins.js有包含我的 mixin 的文件。

我希望能够在我的个人 .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中使用，我仍然会收到“myMixin 未定义”错误。myMixin

还是有另一种方法来注册一个不需要我mixins.js在每个组件中输入文件路径的mixin？

4

3 回答 3

11

我建议将您的 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（或者所有如果还没有创建）都具有 mixin 功能

小心全局可用的 mixin 上的命名空间冲突（！）

于 2016-04-08T20:41:45.237 回答
1

几个想法：

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

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

  1. 为了不必在每个文件中声明完整路径，您可以按照使用 npm 安装本地模块将 mixin 创建为本地 NPM 模块？. 那你就可以了import myMixin from 'myMixin'。我认为这将是更合适的方法，这样您仍然可以在每个组件中加载依赖项，只需使用一些速记。
于 2016-04-08T03:13:29.530 回答
1

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

 Vue.mixin(myMixin);
于 2021-01-25T12:26:36.697 回答