首页 > 其他分享 >ref同步的数据属性

ref同步的数据属性

时间:2023-09-21 10:23:28浏览次数:26  
标签:... 同步 realForm 组件 ref 属性

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

相关文章

  • Fragment初学5——使用Fragment的子类PreferenceFragment
    在Android的应用中通常都有setting功能,能够设置一些全局的选项,例如字体颜色,个人喜好等等。这些东西都存在一个xml中,在android中对应的对象就是SharedPreferences。在android3.0之前,我们一般继承PreferenceActivity这个基类去实现相关的方法。在3.0之后的系统中当然选择使用Preferen......
  • 解析vue项目,scoped,ref属性,混入mixin,插件,Elementui
    0解析一下vue项目......
  • vue3的ref、reactive的使用
    一、介绍ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref推荐定义基本数据类型,reactive推荐定义引用数据类型(对象或数组) 二、ref与reactive对比<template><p>{{person.name}}</p><p>{{person.long}}</p><p>{{age}}</p><p>{{info.addr......
  • 属性描述符
    属性描述符PropertyDescriptor属性描述符是一个普通对象,用于描述一个属性的相关信息通过Object.getOwnPropertyDescriptor(对象,属性名)可以得到一个对象的某个属性的属性描述符value:属性值configurable:该属性的描述符是否可以修改enumerable:该属性是否可以被枚举writ......
  • Ant Design Vue 中的tab组件中,获取不到$ref
    问题:在tab的组件中引入了一个组件,在页面渲染时,需要用到子组件bpmnModeler里面的方法,调用this.$ref.bpm的时候报错了,找不到bpm<a-tab-panekey="3"tab="流程图"><divclass="search"><a-card><a-rowstyle="positi......
  • python入门基础(14)--类的属性、成员方法、静态方法以及继承、重载
    上一篇提到过类的属性,但没有详细介绍,本篇详细介绍一下类的属性一、类的属性方法是用来操作数据的,而属性则是建模必不的内容,而且操作的数据,大多数是属性,比如游戏中的某个boss类,它的生命值就是属性(不同级别的boss,有不同的生命值),被攻击方法(不同的攻击,伤害值不同),当boss被攻击......
  • 国产免费文件同步工具-微力同步
    一、概述 微力同步一款高效的数据传输工具,简单易用的多平台文件同步软件,惊人的传输速度是不同于其他产品的最大优势,微力同步的智能P2P技术加速同步,会将文件分割成若干份仅KB的数据同步,而文件都会进行AES加密处理。微力同步是一个功能强大、安全可靠的文件同步工具,适用于......
  • 看到过的css 属性!!!
    记录一下看到过的,没见过的不知道就算了; inline-size:60pxblock-size:30pxpadding-block:10px这三个文字属性和writing-mode:有关,writing-mode设置文字是从左往右排列还是从上往下   关于nth-child!!! MDN文档里解释p:nth-child(1){background-color......
  • HBase HFile与Prefix Compression内部实现全解--KeyValue格式
    1.引子 HFile(HBaseFile)是HBase使用的一种文件存储格式的抽象, 目前存在两种版本的HFile:HFileV1和HFileV2 HBase0.92之前的版本仅支持HFileV1,HBase0.92/0.94同时支持HFileV1和HFileV2。 以下分别是HFileV1/V2的结构图: HFileV1HFileV2(注:这两个图片在hbase......
  • Python 爬虫使用 Selenium 如何在 WebElement 获得属性
    首先,我们需要初始化驱动和指定使用特定的流量器。 代码如下: fromseleniumimportwebdriverwd=webdriver.Firefox()上面的代码可以简单的理解为启动一个Firefox的实例。使用css选择器可以把程序读取的HTML理解为一个Doc。我们需要在Doc中选择我们的元素,这个叫做选择......