如何在 vue 3 组合 API 中定义指令？

Question

如何使用 SFC <script setup> 格式的新语法糖在 vue3 组合 api 上定义和使用指令？使用 选项 API 以前是这样的

import click_outside from "@/directives/click-outside.js";
export default {
  directives: {
    "click-outside": click_outside,
  }, 
  ...
}

点击-outside.js

<script setup>
import {defineProps, onBeforeMount, onUnmounted, directive } from "vue";

const onBeforeMount = (el, binding) => {
  ...
};
const onUnmounted = (el) => {
 ...
};
</script>

我无法在组合中找出相同的对应代码API

Answer 1

与常规 script SFC 的功能对等是通过 3 种不同的方式实现的。

props 来自 setup 和 props、emits、expose 组件选项的参数是通过使用 define... helpers 提供的。 =31=]

context（仅 slots 和 attrs 属性）来自 setup 的参数是通过使用 use... helpers.

提供的

components 和 directives 是使用 imports of the same name 间接提供的。

其余功能（例如name 属性）仍然由script element提供，可以与script setup共存。

Answer 2

@Estus Flask 的回答就足够了，但只是为了澄清一下，您只需导入指令，就像使用 PascalCase 或 camelCase 和你可以直接在你的模板中使用它。

<script setup>
import vClickOutside from "@/directives/click-outside.js";
const outside = () =>{ ... }
...
</script>
<template>
...
<div v-click-outside="outside">
...
...
</template>

如何在 vue 3 组合 API 中定义指令？

How to define directives on vue3 compositionAPI?

javascript

vue.js

vuejs3

vue-composition-api

vue-sfc