如何在vue3 compositionAPI上定义指令？

ukqbszuj 于 2021-06-18 发布在 Vue.js

关注(0)|答案(3)|浏览(113)

如何在vue3组合API上定义和使用带有SFC <script setup>的新语法糖的指令？使用options API时，以前是这样的

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

click-outside.js

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

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

我在组合API中找不到相同的对应代码

vue.js

来源：https://stackoverflow.com/questions/69256541/how-to-define-directives-on-vue3-compositionapi

3条答案

按热度按时间

8wtpewkr1#

与常规script SFC的功能对等通过3种不同的方式实现。
setup中的props参数和组件选项中的props、emits、expose字段通过使用define...帮助器提供。
setup中的context（仅限slots和attrs属性）参数通过使用use...帮助器提供。
components和directives是通过使用相同名称的导入间接提供的。
其余的特性（例如name属性）仍然由可以与script setup共存的script元素提供。

赞(0）回复(0）举报 2023-03-18

ee7vknir2#

@Estus Flask的答案已经足够了，但需要澄清的是，您只需像使用PascalCase或camelCase组件那样导入指令，就可以直接在模板中使用它。

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

赞(0）回复(0）举报 2023-03-03

bxpogfeg3#

导入指令：

import click_outside from "@/directives/click-outside.js";
const vClickOutside = click_outside;

和用途：

<div c-click-outside>...</div>

赞(0）回复(0）举报 2023-03-03

我来回答

如何在vue3 compositionAPI上定义指令？

3条答案

相关问题

热门标签

最新问答