[Vue warn]：无法解析指令：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>

所以我不确定为什么会收到此警告。如果我将 vb-popover.hover 替换为 b-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被转换为v-b-popover，然后应用自动前缀成为v-v-b-popover。所以你可以在你的模板中使用它，但对我来说，它看起来很愚蠢。

就名称而言，指令的行为与组件不同。指令名称始终转换为kebab-case并带有前缀v-。