VueJS中全球可用的混合物

Question

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

我按照这些说明设置了项目.这是我的项目结构.我也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但如果我尝试myMixin在任何子组件中使用,我仍然会得到"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在安装fn()中调用,因此所有后续Vues(或者所有后来的Vues都没有创建)具有mixin功能

小心全局可用mixin的命名空间冲突(!)