Vue.js Vue引导：如何触发一个b表的排序以触发另一个b表的排序？

我使用的是

组件，与。在我的项目中，我有一些更复杂的排序例程，但对于这个虚拟示例，我将使用默认的排序例程

当对b表应用排序时，该表仅根据表头中单击的字段进行排序。但我需要实现的是将表头从表内容中分离出来（因为我希望稍后将内容放在可滚动的div中，而头在顶部保持静态-因为用户将滚动）

给出了完整的代码（检查

componets/TableTest.vue

），其中我有三个

组件。第一个只是一个虚拟示例，接下来的两个与第一个相同，但对于其中一个，标题是隐藏的，而对于另一个，主体是隐藏的

我想要实现的是：

---

如果仔细查看文档（），您可以看到

组件发出了某些事件。
其中之一是

排序已更改

。因此，如果您在仅标题组件上侦听该消息，然后设置一个

sortBy

属性，并将其传递到仅正文组件中，则所有设置都已完成

//header only
<b-table ... @sort-changed="sortChanged">

// body only
<b-table :sort-by="sortBy" ...>

sortChanged(e) {
  this.sortBy = e.sortBy
}

//仅标题
//只有身体
排序更改（e）{
this.sortBy=e.sortBy
}

---

这里的完整示例：

据我所知，OP要求：

“如何强制

组件（重新）排序，而无需用户单击该

组件？”

我的回答（就他们而言）：

检测上述“可见标题”上的点击事件

在该单击事件的函数处理程序中，从目标表发出一个

sort changed

事件

//假设为SFC（单文件组件）
把桌子整理一下！
导出默认值{
// ...
方法：{
handleClick（evt）{
///当您单击按钮时，将调用此选项
此.$refs.mytable.$emit（'sort-changed'））
}
handleSortChange（上下文）{
//当引用为“mytable”的b-table听到“sort changed”事件时，调用此函数
//它已经发出
//排序逻辑在这里
}
}
//...
}

// Assuming an SFC (single file component)

<template>
<div>
<b-button @click="handleClick">Sort the table!</b-button>

<b-table ref="mytable" @sort-changed="handleSortChange"></b-table>
</div>
</template>

<script>

export default {
  // ...

  methods: {

    handleClick(evt) {
      /// this is called when you click the button
      this.$refs.mytable.$emit('sort-changed')
    }

handleSortChange(context) {
      // this is called when b-table with ref "mytable" hears the 'sort-changed' event
      // that it has emitted

      // sorting logic goes here
    }
  }
  //...
}


</script>