如何在 Vue 中注册自定义指令

Question

在 VueJs 文档中，https://vuejs.org/guide/custom-directive.htmlVue.directive我可以使用本机方法 轻松创建自定义指令

我的问题是你如何能够在export default {}

与注册组件或 prop 时相同：

components: {
   Component1, Component2
},
methods: {
   method1() {
    // code here
   }
},

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');
    }
}

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