¿Cómo definir y usar directivas en la API de composición de vue3 con el nuevo azúcar sintáctico en formato SFC <script setup> ? Con la API de opciones solía ser así
import click_outside from "@/directives/click-outside.js"; export default { directives: { "click-outside": click_outside, }, ... }clic-fuera.js
<script setup> import {defineProps, onBeforeMount, onUnmounted, directive } from "vue"; const onBeforeMount = (el, binding) => { ... }; const onUnmounted = (el) => { ... }; </script>No pude descifrar el mismo código de contraparte en la API de composición
La respuesta de @Estus Flask es suficiente, pero solo para aclarar, solo importa directivas como lo hace con componentes con PascalCase o camelCase y puede usarlo directamente en sus plantillas.
<script setup> import vClickOutside from "@/directives/click-outside.js"; const outside = () =>{ ... } ... </script> <template> ... <div v-click-outside="outside"> ... ... </template>La paridad de características con SFC de secuencia de script normal se logra de 3 maneras diferentes.
El argumento props de setup y props , emits , expose campos de opciones de componentes se proporcionan mediante el uso de define... ayudantes .
El argumento context (solo slots y attrs properties) de setup se proporciona mediante use... helpers .
components y las directives se proporcionan indirectamente mediante el uso de importaciones del mismo nombre .
El resto de las funciones (por ejemplo, la propiedad de name ) aún las proporciona el elemento de secuencia de script que puede coexistir con script setup de la secuencia de comandos.