javascript - 如何全局调用所有自定义指令而不是调用每个组件？

Question

我正在为我的 Vue 项目在单独的单个文件上设置一个指令。

到目前为止，我已经成功地分离文件并在全局范围内调用它，但只能单独执行，而不是导出整个指令并使其全局化。

**directive.js
const highlight ={
    bind(el, binding, vnode) {
       ... some code
}

const highlight2 ={
    ... some code
}
export default {
    highlight,
        highlight
}

**main,js
import Vue from 'vue'
import App from './App.vue'
import * as directive from './directive.js'

Vue.directive(directive);

new Vue({
  el: '#app',
  render: h => h(App),
  directive
})

到目前为止，我已经能够在我的 main.js 上调用此指令，但坚持如何在不调用每个组件的情况下全局创建它。喜欢

import { highlight, highlight2} from './directive

编辑：通过循环使用 forEach 函数找到了我的方式。

Object.keys(directive).forEach(function(name){
    Vue.directive(name, directive[name])
})

标签： javascriptvue.jsdirective