javascript - Can Vue.js custom directive be implemented as individual files? - Stack Overflow

admin管理员组

文章数量:1252920

Is there any way that Vue custom directives can be implemented as individual files (ala Vue ponents .vue file) and be piled in the root js file? (I'm using Webpack)

I tried the following on app.js but it's not recognised.

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

Thanks in advance.

Is there any way that Vue custom directives can be implemented as individual files (ala Vue ponents .vue file) and be piled in the root js file? (I'm using Webpack)

I tried the following on app.js but it's not recognised.

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

Thanks in advance.

• javascript
• vue.js

Share Improve this question Follow edited Jan 23, 2020 at 14:42 Ecuashungo 881212 bronze badges asked Feb 9, 2017 at 14:22 LC YoongLC Yoong 1,84233 gold badges1616 silver badges2020 bronze badges 1

• Tell me what do you want to do? Is the final result <my-custom-directive></my-custom-directive> somewhere in html? – peaceman Commented Feb 9, 2017 at 16:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 11

A directive is only a class with a few well-defined methods. In JS, you can write something like :

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

then, in the file where you use it :

<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>

You can also use

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

to declare it globally.

You can create a global directives file similar to how the global filters are created.

Create a directives.js

import Vue from 'vue'

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

Import it into your main.js

Refer: How to add a bunch of global filters in Vue.js?

I created a directory at /js/directives and added a file called AutoFocus.js with the following contents:

import Vue from 'vue';

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

export default {
  AutoFocus,
};

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

Note that, instead of 'inserted' above you may need to try 'bind' or 'update' depending on the approrpiate hook function for your scenario. I just replaced and tested with each until one worked! Then in my ponent i use the directive as follows:

<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>

Well I'm using Vue with Laravel and I'll give you what works for me.

In your app.js ( root file ) register ponents ( or directives ) as global Vue ponents.

So: // import Vue

Vue = require('vue');

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

After this you'll be able to use it in html like so:

<my-custom-ponent></my-custom-ponent>

I'm sorry if I misunderstood your question.

本文标签： javascriptCan Vuejs custom directive be implemented as individual filesStack Overflow