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

您可以创建一个类似于全局过滤器创建方式的全局指令文件。

Create a directives.js

import Vue from 'vue'

Vue.directive('purple', function(el) {
    el.style.color = 'purple'
})

Import it into your main.js

引用：How to add a bunch of global filters in Vue.js?

Answer 3

我在/ js / directives上创建了一个目录，并添加了一个名为AutoFocus.js的文件，其内容如下：

import Vue from 'vue';

const AutoFocus = {
  inserted(el) {
    el.focus();
  },
};

export default {
  AutoFocus,
};

// Make it available globally.
Vue.directive('focus', AutoFocus);

请注意，您可能需要尝试“绑定”或“更新”，而不是上面的“插入”，具体取决于适用于您的方案的挂钩函数。我只是更换并测试了每一个，直到一个工作了！然后在我的组件中，使用如下指令：

<template>
    <input type="text" v-focus />
</template>
<script>
    import AutoFocus from '../../../directives/AutoFocus'; // Must point to your file!
    export default {
        directives: {
            AutoFocus,
        },
        // ... your other code here, eg props/methods etc
    }
</script>

Answer 4

我和Laravel一起使用Vue，我会告诉你对我有用的东西。

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

所以： //导入Vue

Vue = require('vue');

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

在此之后，您将能够在html中使用它：

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

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

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

4 个答案: