Question

我正在使用Webpack 2并通过特殊require语法导入我的组件。

有超过100个组件，但一次只使用5-10个组件。他们中的大多数（但不是全部）部分具有相同的功能，如道具和生命周期钩子。

这是代码：

// app.js
...

Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

...

我想将mixin应用于异步组件，但该怎么做？ Global mixin适用于所有组件，但这不是我需要的。

我发现feature request，但它已关闭。

Answer 1

我发现了一些令人毛骨悚然的（？）解决方案，但可行：

// mixins.js
export default class Mixins {
   static fooMixin() {
     return {
       created: function () {
         console.log('mixin hook called');
       }
     }
   }
}

// app.js
Vue.component("foo", resolve => {
  require(['./components/foo.vue'], resolve);
});

// foo.vue
<script>
  import Mixins from "mixins";

  export default {
    ...
    mixins: [Mixins.fooMixin()]
  }
</script>

但我希望有一个更优雅的解决方案。

VueJS：将mixin应用于异步组件

1 个答案: