Vue Js：在带有 vue-loader 的组件中使用指令

Question

我正在使用 vue-loader 并且我面临一个问题，因为我在主 app.js 中创建了一个指令以在组件中使用，但无法在组件中使用该指令。

我收到这条消息：

vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>)

应用程序.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
    el: '#app',
    components: { App },
    directives: {
        swiper:  {
            bind: function () {
                console.log('my directive');
          }
        }
    }
});

应用程序

<template lang="jade">
    testimonial-comp
</template>

<script>
    import TestimonialComp from './components/Testimonial.vue'

    export default {
        components: {
            TestimonialComp
        }
    }
</script>

<style lang="stylus" scoped>

</style>

推荐.vue

<template lang="jade">
  article#testimonial
    .swiper-container(v-swiper)
      .swiper-wrapper
        .swiper-slide Slide 1
        .swiper-slide Slide 2
        .swiper-slide Slide 3
      .swiper-pagination
      .swiper-button-prev
      .swiper-button-next
      .swiper-scrollbar

</template>

<script>
  import Swiper from 'Swiper/dist/js/swiper.min.js'

</script>
<style lang="stylus">

</style>

我希望你能帮助我。

Answer 1

我不太明白您的代码，但是如果您想在组件（*.vue 文件）中使用指令，我可以向您展示如何：

组件/snippet.vue

<template>

    <div id="snippet">
        <code v-snippet>
            {{snippet.code}}
        </code>
    </div>

</template>


<script>

import snippet from '../directive/snippet';


export default {
    directives: {
        snippet: snippet
    }
}

</script>

指令/snippet.js

export default {

    update: function (el) {

        console.log('update');
    }
}

有关更多信息，您可以查看http://vuejs.org/v2/guide/custom-directive.html（介绍部分）。