Vue Js：通过vue-loader在组件中使用指令
我正在使用vue-loader，而且我正面临一个问题，因为我已经在主要的app.js中创build了一个用于组件的指令，但不能在组件中使用该指令。
我收到这个消息：
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>
我希望你能帮助我。
我不太了解你的代码，但是如果你想在组件（* .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 （简介部分）。