Vue2 父子组件数据传递与调用：从 ref 到 $emit

提示：https://github.com/jeecgboot/jeecgboot-vue2

---

案例

提示：以下是本篇文章正文内容，下面案例可供参考

以下是 整合后的关键代码示例，展示父子组件间的数据传递与方法调用：

父组件 Parent.vue

<template>
  <!-- 1. 父组件通过 ref 引用子组件 -->
  <sysMessage-modal ref="modalForm" @ok="modalFormOk"></sysMessage-modal>
</template>

<script>
export default {
  components: {
    SysMessageModal
  },
  // 方法定义
  methods: {
    // 3. 父组件调用子组件方法并传递数据
    handleEdit(record) {
      this.$refs.modalForm.edit(record); // 调用子组件的 edit 方法
    },
    // 4. 父组件监听子组件的 @ok 事件
    modalFormOk() {
      console.log('处理子组件回调（子向父传数据）');
      this.loadData(); // 刷新表格数据
    }
  }
}
</script>

子组件 SysMessageModal.vue

<template>
  <a-drawer @close="close">
    <!-- 表单内容 -->
  </a-drawer>
</template>

<script>
export default {
  methods: {
    // 2.通过方法参数接收父组件数据
    edit(record) {
      this.model = Object.assign({}, record); // 接收父组件数据
      this.visible = true;
      // 填充表单逻辑...
    },
    // 5. 子组件通过事件向父组件传递数据
    handleOk() {
      this.$emit('ok'); // 触发父组件监听的事件
    }
  }
}
</script>

父组件向子组件传递数据的方式

1. 通过方法调用传递数据
   父组件通过 ref 获取子组件实例，直接调用子组件的方法并传递数据。
   • 在父组件的模板中，子组件通过 ref="modalForm" 注册引用。
   • 当父组件需要编辑数据时（如点击编辑按钮），会调用子组件的 edit 方法，并将当前行数据 record 作为参数传入：

 // 父组件触发编辑操作
   handleEdit(record) {
     this.$refs.modalForm.edit(record); // 将 record 传递给子组件
   }

 // 子组件的 `edit` 方法接收数据并更新表单：
   edit(record) {
     this.model = Object.assign({}, record); // 接收父组件传递的数据
     // 更新表单字段...
   }

父组件调用子组件方法的方式

1. 通过 ref 直接调用子组件方法
   父组件通过 this.$refs.modalForm 获取子组件实例，直接调用其方法。
   • 当用户点击“新增”按钮时，父组件调用子组件的 add 方法打开表单：

  handleAdd() {
    this.$refs.modalForm.add(); // 调用子组件的 add 方法
  }

// 子组件的 `add` 方法负责初始化空表单并显示抽屉：
  add() {
    this.edit({}); // 初始化空数据
    this.visible = true; // 显示抽屉
  }

子组件向父组件传递数据的方式

1. 通过事件触发传递
   子组件通过 $emit 触发事件通知父组件，并可以携带数据。
   • 子组件在提交成功后触发 ok 事件：

     this.$emit('ok'); // 触发父组件的 @ok 事件

//父组件监听此事件，并执行 `modalFormOk` 方法刷新数据：
     <sysMessage-modal @ok="modalFormOk"></sysMessage-modal>

     modalFormOk() {
       this.loadData(); // 父组件重新加载数据
     }

流程示意图

方向	方式	代码示例
父组件 → 子组件	通过 ref 调用子组件方法并传参	this.$refs.modalForm.edit(record);
父组件调用子组件方法	通过 ref 引用直接调用	this.$refs.modalForm.add();
子组件 → 父组件	通过 $emit 触发事件	this.$emit('ok');