在 vue 3 中调用组件本身的插件 app.use

Question

我正在构建一个使用 v-tooltip 插件的组件库。所以我需要在组件本身中安装和使用插件，而不是通过 app.use() 在全局范围内使用它。我已经阅读了很多帖子，但到目前为止我所尝试的方法对我的情况不起作用。

我知道我可以在 Composition API 中访问该应用程序：

import VTooltip from 'v-tooltip';
import 'v-tooltip/dist/v-tooltip.css';

const App = getCurrentInstance().appContext.app;
App.use(VTooltip);

但这不起作用，我收到此警告： [Vue warn]: Component is missing template or render function.

如有任何帮助，我们将不胜感激。

Answer 1

要在组件本身中使用此插件，您可以尝试这样做：

<template>
  <button v-tooltip="/* your code */"> Custom button </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import VTooltip from "v-tooltip";

export default defineComponent({
  directives: {
    tooltip: VTooltip.VTooltip,
    "close-popover": VTooltip.VClosePopover,
    "v-popover": VTooltip.VPopover,
  },
});
</script>

Answer 2

谢谢@Rago，你给了我指令的想法。在这种情况下，解决方案非常简单......目前 v-tooltip 正在进行包重命名（至 floating-vue），因此使用新插件，您可以决定是要使用组件还是指令。

这是解决方案：

<template>
...
<span v-tooltip="help" class="form-help">?</span>
...
</template>

<script>
import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';

export default defineComponent({
  directives: {
    tooltip: VTooltip,
  },
  ...
});
</script>

而对于 Composition API，您只需导入它，如果您遵循命名约定，Vue 将自动检测指令 - 将 v 放在指令前面：

import 'floating-vue/dist/style.css';
import { VTooltip } from 'floating-vue';

const vTooltip = VTooltip;

在 vue 3 中调用组件本身的插件 app.use

Call app.use for plugin in the component itself in vue 3

vue.js

vuejs3

vue-composition-api