如何记录Vuetify DataTables中的修改并传递给其他组件？

我来给你捋捋怎么搞定这个问题哈～其实核心就是绑定数据+监听编辑事件+处理组件间通信这几步，下面给你一步步拆解：

1. 先确保数据双向绑定 #

v-edit-dialog本质是和表单控件配合使用的，首先得把编辑的内容和你的数据源做双向绑定。比如你的表格数据存在items数组里，那在编辑框里用v-model绑定到对应字段就行：

<v-data-table :items="items" :headers="headers">
  <template v-slot:item.name="{ item }">
    <v-edit-dialog>
      <!-- 显示当前值 -->
      {{ item.name }}
      <!-- 编辑输入框，绑定到item的name属性 -->
      <template v-slot:input>
        <v-text-field v-model="item.name" label="编辑名称"></v-text-field>
        <!-- 自定义确认/取消按钮，触发对话框的save/close事件 -->
        <v-btn @click="$emit('save')" color="primary">确认修改</v-btn>
        <v-btn @click="$emit('close')" color="grey">取消</v-btn>
      </template>
    </v-edit-dialog>
  </template>
</v-data-table>

这样用户编辑的时候，修改的内容会实时同步到items数组里的对应条目。

2. 监听编辑完成事件，记录并打印修改内容 #

v-edit-dialog提供了@save事件，当用户点击确认按钮触发$emit('save')时，就会触发这个事件。我们可以在这个事件里拿到修改后的完整数据，甚至对比原始值找出具体修改的字段：

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      headers: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' }
      ],
      originalItem: null // 用来存编辑前的原始数据
    }
  },
  methods: {
    // 打开编辑框时保存原始数据的副本（深拷贝避免引用影响）
    storeOriginalItem(item) {
      this.originalItem = JSON.parse(JSON.stringify(item))
    },
    // 处理编辑完成的逻辑
    handleEditSave(item) {
      // 打印修改后的整条数据
      console.log('修改后的数据:', item)
      
      // 对比原始数据，找出具体修改的字段
      const changedFields = {}
      for (const key in this.originalItem) {
        if (this.originalItem[key] !== item[key]) {
          changedFields[key] = {
            旧值: this.originalItem[key],
            新值: item[key]
          }
        }
      }
      console.log('修改的字段详情:', changedFields)
    }
  }
}

别忘了在模板里给v-edit-dialog加上事件监听：

<v-edit-dialog @open="storeOriginalItem(item)" @save="handleEditSave(item)">

3. 把修改后的数据传递给其他组件 #

传递数据的方式取决于组件间的关系，给你几种常用方案：

• 父子组件：直接用$emit把数据传给父组件，比如在handleEditSave里加一行：

  this.$emit('item-updated', item)
  

  然后父组件监听这个事件就能拿到数据。
• 非父子组件/全局传递：可以用Vuex（把数据存在全局状态里，修改后更新状态，其他组件直接读取状态），或者事件总线（创建一个全局的事件中心，触发事件传递数据，其他组件监听事件接收）。比如事件总线的写法：
  先创建一个EventBus文件：

  import Vue from 'vue'
  export const EventBus = new Vue()
  

  然后在handleEditSave里触发事件：

  import { EventBus } from './EventBus.js'
  // ...
  EventBus.$emit('item-updated', item)
  

  其他组件在created钩子监听：

  import { EventBus } from './EventBus.js'
  // ...
  created() {
    EventBus.$on('item-updated', (updatedItem) => {
      console.log('收到修改后的项目:', updatedItem)
      // 这里处理你的逻辑
    })
  }
  

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