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

Question

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

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

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

提前致谢。

Answer 1

指令只是一个具有一些定义良好的方法的类。在 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)

全局声明它。

Answer 2

好吧，我正在使用 Vue 和 Laravel，我会给你适合我的东西。

在你的 app.js （根文件）中将组件（或指令）注册为全局 Vue 组件。

所以： // 导入Vue

Vue = require('vue');

Vue.component('my-custom-component', require('./directives/ComponentFileName.vue')

之后你就可以在 html 中使用它了，如下所示：

<my-custom-component></my-custom-component>

如果我误解了你的问题，我很抱歉。