如何使用SFC <script setup>格式中的新語法糖來定義和使用vue3組合api的指令？
在options API中，它曾經是這樣的
import click_outside from "@/directives/click-outside.js"/span>;
export default {
directives: {
"click-outside"/span>: click_outside,
},
...
}
click-outside.js
<script setup>
import {defineProps, onBeforeMount, onUnmounted, directive } from "vue"/span>;
const onBeforeMount = （el, binding）=> {
...
};
const onUnmounted = （el） => { ...
...
};
</script>
我沒能在composition API
中找到相同的對應代碼。uj5u.com熱心網友回復：
與常規腳本SFC的功能對等是通過3種不同的方式實作的。
props引數來自setup和props，emits，expose欄位來自組件選項，通過使用define...幫助器，提供。
context（只有slots和attrs屬性）來自setup的引數是通過使用use... helpers提供的。
components和directives是通過使用同名的imports來間接提供的。
其余的功能（例如：
）是通過使用同名的imports來提供的。其余的功能（例如：name屬性）仍然由script元素提供，它可以與script setup共存。
uj5u.com熱心網友回復：
@Estus Flask的回答已經足夠了，但要說明的是，你只要像對待組件那樣用PascalCase或camelCase匯入指令，就可以直接在模板中使用它。
<script setup>
import vClickOutside from "@/directives/click-outside.js"/span>;
const outside = () => { ... }
...
</script>
<template>/span>
...
<div v-click-outside="outside">
...
...
</template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/327380.html
標籤：
上一篇：傳播非可迭代實體的無效嘗試。為了成為可迭代的，非陣列物件必須有一個[Symbol.iterator]()方法
下一篇：模式匹配不允許我更改值