Question

我正在使用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>

我希望你能帮助我。

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（简介部分）。

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

1 个答案: