Vue.js中如何为Bootstrap-Vue的<b-nav-item-dropdown>组件绑定点击事件

找不到对应事件说明的核心原因是：b-nav-item-dropdown 是 Bootstrap-Vue 基于b-dropdown封装的导航栏专属组件，所有事件、属性都和底层的b-dropdown完全对齐，不会单独在导航组件的文档页重复罗列。

两类常用点击场景的实现方式 #

1. 监听下拉触发按钮的点击/展开状态切换 #

直接用组件内置的@toggle事件即可，这个事件会在用户点击下拉触发按钮、切换菜单展开/收起状态时触发，回传参数为当前下拉菜单的展开布尔值，完全可以替代原生click的使用场景。

修改后的示例代码：

<b-nav-item-dropdown 
  text="nav_title"
  @toggle="handleTriggerClick"
>
    <b-dropdown-item href="#">a</b-dropdown-item>
    <b-dropdown-item href="#">a</b-dropdown-item>
</b-nav-item-dropdown>

对应方法逻辑：

methods: {
  handleTriggerClick(isOpen) {
    // isOpen = true 代表当前菜单是刚展开的状态
    if (isOpen) {
      // 在这里写用户点击触发按钮、打开菜单时要执行的逻辑
    }
  }
}

注意：不要直接在<b-nav-item-dropdown>标签上硬绑原生@click，这个组件的DOM结构是「触发按钮+下拉菜单容器」的组合，绑定原生click会同时捕获到内部菜单项的点击冒泡事件，很容易出现逻辑误触发的问题。

2. 监听下拉菜单内部选项的点击 #

直接在每个b-dropdown-item子组件上绑定点击事件即可，搭配.prevent修饰符可以避免默认的href跳转行为：

<b-nav-item-dropdown text="nav_title">
    <b-dropdown-item 
      @click.prevent="handleItemSelect('第一个选项')"
    >
        a
    </b-dropdown-item>
    <b-dropdown-item 
      @click.prevent="handleItemSelect('第二个选项')"
    >
        a
    </b-dropdown-item>
</b-nav-item-dropdown>

对应方法逻辑：

methods: {
  handleItemSelect(itemName) {
    // 在这里写选中对应菜单项后的业务逻辑
    console.log('用户选中了：', itemName)
  }
}

内容的提问来源于stack exchange，提问作者Akash Patel