Question

在VueJs文档中，https://vuejs.org/guide/custom-directive.html 我可以使用原生Vue.directive方法

轻松创建自定义指令

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

中创建自定义指令

与注册组件或道具时相同：

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

有关详细信息，您可以查看http://vuejs.org/v2/guide/custom-directive.html（简介部分）。

Answer 2

您可以通过这种方式创建自定义指令

export default {
  components: {
    Component1, Component2
  },
  methods: {
    method1() {
      // code here
    }
  },
  directives: {
    // create a directive named 'elementLog'
    elementLog: {
      inserted: function (el) {
        console.log(el)
      },
    },
  },
}

在模板中，以kebab-case格式写入指令名称，并添加'v-'

<template>
  <div>
    <span v-element-log>One</span>
    <span v-element-log>Two</span>
  </div>
</template>

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

2 个答案: