导入/引用Vue.js指令的最佳方法是什么？

Question

我正在尝试将我的插件组织成自定义Vue指令，它可以像这样简单：

Vue.directive('popout', {
    bind() {
        $(this.el).popOut();
    }
});

将它们保存在单独的文件中，并导入到主JS文件或Vue(ify)组件中，例如：

require('./directives/popout.js');

我曾尝试过多种export default的设置，但似乎无法使其正常工作。有没有最干净（即最佳实践）的方法来解决这个问题？

- oscaralexander

---

指令是不可取的。 - gurghet

既然您似乎想要在全局注册它们(Vue.directive(...))，那么这些文件中没有任何需要导出的内容，也就不需要进行任何导出操作。只需确保在这些文件中import Vue from 'vue'即可。 - Linus Borg

嗨，Oscar，我想知道你是否找到了解决方法，如果可以分享一下就太感谢了。 - Beaker

Answer 1

我找到了解决方案，以下是代码：

我得到了解决方案，以下是代码

import Vue from 'vue';
export const global= {
 bind(el, binding, vnode) {
     console.log('you code');
 }
};

这段代码放在指令（directive）或全局（global）JS文件中。 然后在你的app.js或入口点文件中使用以下代码：

import { global } from './directive/global.js';
Vue.directive('global', global);

第一行将指令导入，因为我们使用相同的名称只使用全局，第二行使您的指令全局。希望这有所帮助。

- Mufaddal Kangsawala