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中使用組件的指令

回答

相關問題