Vue父组件获取子组件可选择Bootstrap表格数据选中后不更新如何解决

现有实现的核心问题在于：直接引用导入的子组件构造函数的初始数据作为父组件的数据源，和实际渲染的子组件运行时实例完全隔离，自然无法响应子组件内的选中状态变化。导入的Permissions是组件类，不是页面中实际挂载的组件实例，你拿到的Permissions.data只是组件定义阶段的静态初始值，不会随实例状态更新。

具体修改步骤 #

第一步：修改子组件代码 #

1. 给模板中的b-table补全选中相关属性、绑定行选中事件，确保选中变化能触发处理逻辑：

<b-table 
  ref="selectableTable"
  :fields="permissionsFields"
  :items="availablePermissions"
  selectable
  :select-mode="selectMode"
  @row-selected="onRowSelected"
>
<!-- 原有插槽内容保持不变 -->
</b-table>

2. 修改子组件的onRowSelected方法，选中状态变化时向上派发事件同步数据：

methods: {
  onRowSelected(items) {
    this.selectedPermission = items
    // 新增：将选中数据传递给父组件
    this.$emit('selected-change', items)
  },
  // 其他原有方法保持不变
}

第二步：修改父组件代码 #

1. 调整逻辑删除无效代码：

import Permissions from '../components/User/PermissionsList'

export default {
  components: { Permissions },
  data() {
    return {
      // 初始设为空数组，后续通过子组件事件同步更新
      selectedPermissions: [],
    }
  },
  // 删除原有created中直接调用Permissions.fetchData()的无效代码，子组件mounted已经处理了权限数据拉取
}

2. 父组件模板中使用子组件时，绑定子组件派发的事件接收数据：

<Permissions @selected-change="selectedPermissions = $event" />

修改完成后，子组件选中行的状态会实时同步到父组件的selectedPermissions变量，可直接用于父组件的渲染逻辑。

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