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

【问题标题】：Vue Js: Use directive in component with vue-loaderVue Js：在带有 vue-loader 的组件中使用指令
【发布时间】：2016-09-10 07:40:47
【问题描述】：

我正在使用 vue-loader，但我遇到了一个问题，因为我在主 app.js 中创建了一个要在组件中使用的指令，但无法在组件中使用该指令。

我收到这条消息：

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

app.js

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

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

App.vue

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

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

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

<style lang="stylus" scoped>

</style>

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

我希望你能帮助我。

【问题讨论】：

你在这方面有什么进展吗？
@gurghet 是的，我只是在组件中直接使用 Vue.directive('swiper', { bind: function () {............ 并导入了指令文件也在组件中。

标签： node.js vue.js vue-loader

【解决方案1】：

我不太了解你的代码，但是如果你想在组件（*.vue 文件）中使用指令，我可以告诉你如何：

组件/sn-p.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>

指令/sn-p.js

export default {

    update: function (el) {

        console.log('update');
    }
}

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

【讨论】：