Vue3 composition API下如何在<script setup>中定义并使用自定义指令？

<script setup>
import { directive } from 'vue'
import clickOutside from "@/directives/click-outside.js"

// 手动指定指令名称
directive('click-outside', clickOutside)
</script>

<template>
  <div v-click-outside="handleClickOutside">...</div>
</template>

可选：全局注册自定义指令 #

如果该指令需要在多个组件中复用，可以直接全局注册，不需要每个组件单独导入：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import clickOutside from "@/directives/click-outside.js"

const app = createApp(App)
// 全局注册指令
app.directive('click-outside', clickOutside)
app.mount('#app')

全局注册后所有组件内都可以直接使用v-click-outside指令。

内容的提问来源于stack exchange，提问作者miqe