组件 $emit 似乎停止了 Bootstrap Vue table 中的事件传播

Question

我正在尝试在 BV 中做这样的事情 table 使用行单击事件将行单击的结果发送到父组件：

<template>   
  <div>
    <b-table :items='totals' selectable select-mode='single' hover @row-clicked='rowClicked'></b-table>
  </div>
</template> 

<script>

export default {
  data: function() {
    return { }
  },
  props: ['totals'],
  methods: {
    rowClicked(rowData) {
      this.$emit("filter-total", rowData.total)
    }
  }
}
</script>

$emit 工作正常，但似乎阻止了行选择事件，因为该行永远不会被选中（这让用户感到困惑）。如果我用其他东西替换 $emit，则该行被正确选择。

为什么会发生这种情况，我该如何预防？

Answer 1

我在代码片段中实现了你的案例，我认为你的问题是因为你使用的 bootstrap-vue 版本。将您的 bootstrap-vue 软件包升级到最新版本，您的问题应该得到解决。

Vue.component("customComponent", {
  template:
    "<b-table :items='items' selectable select-mode='single' hover @row-clicked='rowClicked' />",
  data() {
    return {
      items: [
        {
          isActive: true,
          age: 40,
          first_name: "Dickerson",
          last_name: "Macdonald"
        },
        { isActive: false, age: 21, first_name: "Larsen", last_name: "Shaw" },
        { isActive: false, age: 89, first_name: "Geneva", last_name: "Wilson" },
        { isActive: true, age: 38, first_name: "Jami", last_name: "Carney" }
      ]
    };
  },
  methods: {
    rowClicked(items) {
      this.$emit("filter-total", items.age);
    }
  }
});

new Vue({
  el: "#app",
  methods: {
    do_sth(value) {
      console.log(value);
    }
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <custom-component @filter-total="do_sth" />
</div>

组件 $emit 似乎停止了 Bootstrap Vue table 中的事件传播

Component $emit seems to stop event propagation in Bootstrap Vue table

bootstrap-vue