如何在 Vue 中为整个应用程序注册全局指令

Question

如何注册 Vue 指令，以便它可在 Vue 应用程序的所有组件中使用？我正在使用Vue 2

文档说你可以注册全局，但是我在我的项目中的哪里添加这个Vue.directive(....)

src/指令/TestMe.js

import Vue from 'vue'

export default Vue.directive('test-me', {
  inserted(el) {
    el.style.backgroundColor = 'red'
  },
})

src/components/SignInForm.vue

<template>
    <div>
        <code v-test-me>
            Hello World
        </code>
    </div>

</template>

</script>

我通过执行以下操作知道当前的方法。但是，如果我计划在应用程序的多个组件和页面中使用指令，那么这是不切实际的。

<template>
    <div>
        <code v-test-me>
            Hello World
        </code>
    </div>
</template>

<script>
import TestMe from '../../directives/TestMe'
export default {
    directives: {
        TestMe
    }
}
</script>

根据下面的答案更新了更新的帖子。

我为每个指令创建了不同的文件，然后有一个 index.js 文件，我在其中导入所有指令。如何在应用程序开始时启动指令文件夹中的index.js 文件？

// src/directives/TestMe.js
export default testMe = {
  inserted(el) {
    el.style.backgroundColor = 'red'
  },
}

// src/directives/index.js
import testMe from './TestMe'

export default {
  install(Vue) {
    Vue.directive('test-me', testMe)
    // Vue.directive('other-directive', myOtherDirective)
  },
}

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import ???? from './directives'

const app = createApp(App)
app.use(????)

你有 globalDirectives...这个名字从哪里来？

Answer 1

编辑：我没有读到 OP 正在使用 Vue 2。

要调用.use()，您需要使用函数导出对象 install(Vue)

如果您希望将该指令作为单独的文件。

// src/directives/TestMe.js

const testMe = {
  inserted(el) {
    el.style.backgroundColor = 'red'
  },
}
export default testMe

您可以在此处注册所有指令。您可以导入文件或仅在此处定义指令。

// src/directives/index.js

import testMe from './TestMe'

// const myOtherDirective = {
//   ...
// }

export default {
  install (Vue) {
    Vue.directive('test-me', testMe)
    // Vue.directive('other-directive', myOtherDirective)
  }
}

以下是如何在 Vue 2 中注册指令

您可以使用 Vue.use 在 main.js 中注册全局指令

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import globalDirectives from './directives'
Vue.use(globalDirectives)

const app = new Vue({
  router,
  store,
  render: h => h(App),
})
app.$mount('#app')

以下是如何在 Vue 3 中注册指令

您可以在 createApp 之后在 main.js 中注册全局指令

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import globalDirectives from './directives'

const app = createApp(App)
app.use(globalDirectives)