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

我正在使用vue-loader，而且我面临一个问题，因为我在主要的app.js中创建了一个用于组件的指令，但不可能在组件中使用该指令。Vue Js：在vue-loader中使用组件的指令

我收到此消息：

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

app.js

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>

我希望你能帮助我。

来源

2016-05-14 SoldierCorp

你有什么进展吗？ – gurghet

@gurghet是的，我刚刚在组件中使用Vue.directive（'swiper'，{bind：function（）{..........）创建了指令，并且还在组件中导入了文件。 – SoldierCorp

我不太理解你的代码，但如果u想使用指令的一个组成部分（* .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（前奏部分）。

来源

2017-02-13 07:28:14

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

回答

相关问题