前端开发之this.$options.data的使用

news2025/1/18 20:20:32

前端开发之this.$options.data的使用

  • 前言
  • 效果图
  • vue2中使用
  • vue3中使用

前言

this.$options.data:初始化对象

效果图

在这里插入图片描述
在这里插入图片描述

vue2中使用

this.$options这是一个Vue的特性,它可以让你访问组件的选项对象。你可以使用this.$options.data.call(this)来获取组件的初始数据,并用它来重置form的值
export default {
    name: 'TableEdit',
    emits: ['fetch-data'],
    data() {
      return {
        form: {
          title: '',
          author: '',
        }
      }
    },
    methods: {
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      }
    }
  }
</script>

vue3中使用

<script>
import { reactive, toRefs, ref } from 'vue'

export default {
  name: 'TableEdit',
  setup () {
    const form = ref()
    const formdata = reactive({
      title: '',
      author: ''
    })

    const resetForm = () => {
    // 使用Object.assign初始化对象
      Object.assign(formdata, {
        title: '',
        author: ''
      })
    }
    const close = () => {
      form.value.resetFields()
      resetForm()
      data.dialogFormVisible = false
    }

    return {
      form ,
      formdata,
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/532549.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytorch模型转ONNX

目录 1. ONNX 2. pytorch 转 ONNX 3. 加载 ONNX 文件 4. Netron 1. ONNX 一般来说&#xff0c;pytorch训练好的模型是不能够直接用于生产环境&#xff0c;有很多的地方没有优化 而ONNX 格式可以兼顾不同框架的模型&#xff0c;相当于一个中间人的角色。这样部署到不同的环…

msvcr120.dll丢失怎样修复,学这三招就可以修复好

年前才买的新电脑&#xff0c;今天在打开软件ps软件的时候&#xff0c;电脑就提升msvcr120.dll文件丢失&#xff0c;无法执行此代码。刚刚开始以为是电脑的系统没有装好&#xff0c;经过我一下午时间的研究&#xff0c;原来是电脑msvcr120.dll文件丢失一般都是下载到垃圾软件&a…

软件测试后浪太强了,前浪有点顶不住啊,真难受...

想和大家说的话 8年前军哥刚进入到IT行业&#xff0c;现在发现学习软件测试的人越来越多&#xff0c;今天想根据军哥的行业经验再结合自己的一些看法给大家提一些建议。 最近聊到软件测试的行业内卷&#xff0c;越来越多的转行和大学生进入测试行业&#xff0c;导致软件测试已…

证件照片如何换背景底色,3个免费制作证件照的方法,简单易学

在日常生活中&#xff0c;我们经常需要用到证件照&#xff0c;比如&#xff1a;找工作需要简历上附带有证件照&#xff0c;还有办理学生证、身份证也需要提交证件照。 不同的平台有时候提交的要求&#xff08;背景底色、大小等&#xff09;也不一样&#xff0c;如果你不想每次…

缺少dll文件怎么办?修复dll文件的多种方法

缺少dll文件怎么办&#xff1f;当您试图启动某个应用程序或游戏时&#xff0c;可能会遇到“缺少DLL文件”的错误提示。DLL文件是动态链接库文件的缩写&#xff0c;它们包含在计算机上的许多应用程序和游戏中&#xff0c;并且是确保这些应用程序和游戏正常运行的重要部分。当出现…

秒懂!项目安全问题-SM4加解密

项目安全问题一直被人们研究&#xff0c;当前端路径上通过?status这种拼接参数时&#xff0c;参数的值在浏览器路径栏上非常醒目&#xff0c;是很容易被人恶意修改的&#xff0c;比如该用户并没有编辑权限&#xff0c;但有心之人却可以通过修改参数status的值把see改成edit&am…

【DataX】将hive表数据导入ES

目录 一、环境 二、创建hive测试表 三、Es写入插件包 四、配置json 五、数据同步 1、执行命令 2、查看es结果 一、环境 DataX&#xff1a;windows安装 Es版本&#xff1a;7.9.0 二、创建hive测试表 CREATE TABLE teacher(name string,age int )row format del…

抖音未来的发展趋势|成都欢蓬信息

抖音未来的发展趋势&#xff0c;近年来随着互联网技术的发展&#xff0c;小视频app也逐渐走入大家的日常生活中&#xff0c;闲着的时候打开手机抖音APP&#xff0c;就可以刷到世界各地人们分享的视频和直播&#xff0c;下面一起看看抖音未来的发展趋势 一、抖音的现状   据权…

【 五子棋对战平台(java_gobang) 】

文章目录 一、核心功能及技术二、效果演示三、创建项目扩展&#xff1a;WebSocket 框架知识 四、需求分析和概要设计五、数据库设计与配置 Mybatis六、实现用户模块功能6.1 数据库代码编写6.2 前后端交互接口6.3 服务器开发6.4 客户端开发 七、实现匹配模块功能7.1 前后端交互接…

构建新一代智慧园区移动应用以推动数字转型

随着智慧城市的建设和智慧园区的崛起&#xff0c;智慧园区数字一体化建设成为园区发展的重心&#xff0c;当然数字转型离不开移动应用的整合服务。 在过去的几年中&#xff0c;智慧园区移动应用已经发展成为园区管理和服务的重要手段之一&#xff0c;为企业和员工提供了更加便…

知行之桥EDI系统2023版功能介绍——概览页面

登录知行之桥EDI系统2023版&#xff0c;即可看到概览页面。默认情况下&#xff0c;会显示过去7天的各项指标。用户可以在页面右上角&#xff1a;显示过去的数据 下拉列表中手动选择需要的时间段&#xff0c;如&#xff1a;24小时、3天、7天等。 关键指标的自定义配置 概览页面…

如何将exe注册为windows服务,直接从后台运行

如何将exe注册为windows服务&#xff0c;直接从后台运行 使用instsrvsrvanywindow64位系统安装配置 window32位系统安装 使用instsrvsrvany 这是地址&#xff1a;链接: 网盘地址 提取码: h2za 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 window64位系统 安…

[OOD设计] - 电梯系统设计

明确主要需求 首先需要设计电梯系统的基本工作流程&#xff0c;一个简单电梯系统主要就是两个主要功能&#xff1a; 乘客在电梯外按下按钮时&#xff0c;电梯系统会驱动一个电梯来接人乘客在电梯内部按下楼层按钮时&#xff0c;电梯系统会驱动该电梯到达指定楼层 根据需求来…

泰克Tektronix AFG31021 任意波函数发生器产品资料

AFG31021是一款高质量、多功能的任意波形发生器&#xff0c;可以生成高精度、高分辨率的波形信号。该产品的主要特点包括&#xff1a; 可以生成任意波形信号&#xff0c;内置多种标准波形&#xff0c;如正弦波、方波、三角波、锯齿波等&#xff0c;也可以通过用户自定义来生成…

支付从业者转型路在何方?

近来&#xff0c;整个支付行业&#xff0c;已经“卷”出了新高度。 营销上电销卷地推&#xff0c;工单卷电销&#xff0c;POS机具则是退押金卷不退押金&#xff0c;无押金卷退押金”&#xff0c;互相“卷”得不亦乐乎。 与此同时&#xff0c;支付圈子里聊的永远是“成本上升”…

微信小程序是怎么做的?

微信小程序是一种轻量级的应用&#xff0c;它可以在微信内部直接使用&#xff0c;无需下载和安装。那么&#xff0c;微信小程序是怎么做的呢&#xff1f; 微信小程序制作的大概步骤 微信小程序制作主要包括以下几个步骤&#xff1a; ①注册小程序账号 ②在小程序制作工具创…

5th-Generation Mobile Communication Technology(一)

目录 一、5G/NR 1、 快速参考&#xff08;Quick Reference&#xff09; 2、5G Success 3、5G Challenges 4、Qualcomm Videos 二、PHY and Protocol 1、Frame Structure 2、Numerology 3、Waveform 4、Frequency Band 5、BWP 6、Synchronization 7、Beam Management 8、CSI Fra…

matmul/mm 函数用法介绍

介绍torch.matmul之前先介绍torch.mm函数, mm和matmul都是torch中矩阵乘法函数&#xff0c;mm只能作用于二维矩阵&#xff0c;matmul可以作用于二维也能作用于高维矩阵 mm函数使用 x torch.rand(4, 9) y torch.rand(9, 8) print(torch.mm(x,y).shape)torch.Size([4, 8]) m…

Linux Shell 实现一键部署VMware Workstation

VMware Workstation 前言 VMware Workstation Pro 是业界标准的桌面 Hypervisor&#xff0c;用于在 Linux 或 Windows PC 上运行虚拟机 download VMware_Workstation VMware_Workstation WindowsVMware_Workstation linux文档downloaddownload参考 Linux 各系统下载使用参…

Scrapy 基本使用

一、Scrapy框架使用 1. 创建scrapy项目&#xff08;不能有汉字&#xff0c;不能数字开头&#xff09; scrapy startproject Baidu 2. 创建爬虫文件 1. cd Baidu 2. scrapy genspider wenda www.baidu.com 注意&#xff1a; parse()是执行了start_url之后要执行的方法&#…