javascript - Vue.js自定义指令可以作为单独的文件实现吗？

有什么方法可以将Vue自定义指令实现为单个文件(ala Vue组件.vue文件)并在根js文件中进行编译？ (我正在使用Webpack)

我在app.js上尝试了以下操作，但无法识别。

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

提前致谢。

最佳答案

指令只是具有一些定义明确的方法的类。在JS中，您可以编写如下内容:

export const MyDirective {
    bind(el,binding,vnode) {
        /* your code */
    }
}

然后，在使用它的文件中:

<template>
    <p v-app-my-directive:arg.modifier="value">Some Text</p>
</template>
<script>
    import MyDirective from './directives/MyDirective.js';

    export default {
        directives: {
            AppMyDirective: MyDirective
        }
        /* ... */
    }
</script>

您也可以使用

Vue.directive('app-my-directive', MyDirective)

在全局范围内进行声明。