Vue.js 中父子组件间传递表格状态数据的响应式解决方案

本文讲解如何在 vue 2 中通过 `this.$set` 正确为 bootstrap table 的 `items` 数组项动态添加响应式属性（如 `state`），解决因直接赋值导致 dom 不更新的问题。

在 Vue 2 中，响应式系统依赖于对象属性的 getter/setter 代理机制。当你对已存在的响应式对象（如 this.customItems[i]）直接新增属性（例如 item.state = true），Vue 无法自动侦测该变化，因此模板中 v-if="row.item.state" 始终读取为 undefined，即使 console.log 显示数据已写入——这是因为新属性未被纳入响应式追踪。

✅ 正确做法：使用 this.$set

必须使用 this.$set(target, key, value)（或全局 Vue.set）显式声明新属性，确保其响应式生效：

GentleAI

GentleAI是一个高效的AI工作平台，为普通人提供智能计算、简单易用的界面和专业技术支持。让人工智能服务每一个人。

下载

methods: {
  isSingleRow(event) {
    this.singleRow.push(event);
    for (let i in this.customItems) {
      // ❌ 错误：非响应式赋值
      // this.customItems[i].state = this.singleRow[i];

      // ✅ 正确：强制创建响应式属性
      this.$set(this.customItems[i], 'state', this.singleRow[i]);
      console.log('EHO ', i, ' state:', this.customItems[i].state);
    }
  }
}

? 提示：this.$set 是 Vue 2 提供的官方 API，专用于向响应式对象/数组中添加新属性并触发视图更新。

? 补充说明与最佳实践

• 为什么 created() 中 emit 不可靠？
  子组件 created 钩子执行时，父组件的 customItems 可能尚未完成初始化或异步加载，导致 singleRow 索引错位。建议改为监听 items 更新后触发逻辑，例如：

  watch: {
    customItems: {
      handler() {
        // 确保 items 已就绪再批量初始化 state
        this.customItems.forEach((item, index) => {
          this.$set(item, 'state', this.singleRow[index] ?? false);
        });
      },
      immediate: true,
      deep: true
    }
  }

• 子组件优化建议
  当前子组件 tableRowsLength() 在 created 中调用，但未考虑 innerTableItems 是否已从 API 加载完成。应结合 v-if 或 watch 等待数据就绪：

  watch: {
    innerTableItems: {
      handler() {
        if (this.innerTableItems.length) {
          this.$emit('onitembind', this.innerTableItems.length !== 1);
        }
      },
      immediate: true
    }
  }

• 模板中正确引用 slot
  注意你原代码中

✅ 总结

遵循上述方式，即可实现父子组件间表格行状态（true/false）的可靠、响应式同步，确保 Bootstrap Table 的条件渲染（如图标显示）实时生效。