JZTXT

ref同步的数据属性

发布时间 2023-09-21 10:19:33作者: sen_hf

代码码中存在一些重复部分，即两个地方都使用了<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>