vue.js - 如何在 Vue 中注册自定义指令

Question

在 VueJs 文档中，https://vuejs.org/guide/custom-directive.html 我可以使用 native Vue.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 (介绍部分)。