[Vue 警告]：无法解析指令：b-popover

Question

<template>
  <div>
    <div class="text-center my-3">
      <b-button
        v-b-popover.hover="'I am popover content!'"
        title="Popover Title"
        >Hover Me</b-button
      >
    </div>
  </div>
</template>

<script>
import { VBPopover } from "bootstrap-vue";
export default{
  directives: {
    VBPopover
  },
}
<script>

所以我不确定为什么我会收到这个警告。 如果我用 b-popover.hover 替换 vb-popover.hover 这个警告消失但功能不存在。

基本上试图从文档中实现popover指令： https://bootstrap-vue.org/docs/directives/popover

Answer 1

指令 ID 自动以v-为前缀。 您可能应该明确设置指令 ID，如此处所示

directives: {
  'b-popover': VBPopover
}

---

发生的事情是

directives: {
  VBPopover 
}

是相同的

directives: {
  VBPopover: VBPopover
}

并且名称VBPopover被转换为vb-popover ，然后应用自动前缀成为vvb-popover 。 所以你可以在你的模板中使用它，但对我来说，它看起来很傻。

当涉及到它们的名称时，指令的行为不像组件。 指令名称始终转换为kebab-case并以v-为前缀。