南通网站制作设计_个人免费网站平台_深圳seo优化服务商_软文写作模板

提示：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');