代码码中存在一些重复部分,即两个地方都使用了<wo-work-order-form>
组件。如果这两个地方的<wo-work-order-form>
组件需要保持同步,那么应该使用同一个实例。可以通过在父组件中定义一个realForm
的数据属性,并将其传递给两个地方的<wo-work-order-form>
组件的ref
属性,以达到同步的效果
修改前:
<div v-show="!tabShow"> <wo-work-order-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></wo-work-order-form> </div>
<div v-show="tabShow"> <a-tabs default-active-key="1"> <a-tab-pane key="1" :tab="fromTitle" :forceRender="true"> <wo-work-order-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></wo-work-order-form> </a-tab-pane> </div>
修改后:
<template> <div> <div v-show="!tabShow"> <wo-work-order-form :ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></wo-work-order-form> </div> <div v-show="tabShow"> <a-tabs default-active-key="1"> <a-tab-pane key="1" :tab="fromTitle" :forceRender="true"> <wo-work-order-form :ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></wo-work-order-form> </a-tab-pane> <!-- 其他选项卡内容 --> </a-tabs> </div> </div> </template> <script> export default { data() { return { realForm: 'realForm', // 用于同步的数据属性 // 其他数据属性... }; }, methods: { submitCallback() { // 提交回调函数逻辑... }, // 其他方法... }, }; </script>标签:...,同步,realForm,组件,ref,属性 From: https://www.cnblogs.com/sen-hf/p/17719245.html