Vue在组件上使用ref代码及总结

//可以通过 this.$refs将数据用子组件函数传递,在子组件函数接收数据,达到修改数据的目的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <input type="text" v-model.number="num1" /> +
      <input type="text" v-model.number="num2" /> 
      <button @click="handlePlus">=</button>
    </div>

    <todo-input  ref="todoInputRef"></todo-input>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
  </script>
  <script>
    const todoInput = {
      template: `
        <div>两个数字相加之和: {{ sum }}</div>
        <div class="input">
          <input
            type="text"
            placeholder="请输入新待办事项"
            ref="inputRef"
            :value="modelValue"
            @input="handleAdd"
          >
          <button class="add" @click="handleAdd">添加</button>
        </div>
      `,
      data() {
        return {
          message: 'Hello',
          hobbies: [1,2,3,4,5],
          sum: 0,
        }
      },
      methods: {
        plus(num1, num2) {
          this.sum = num1 + num2
        },
      },
    }
    Vue
      .createApp({
        data() {
          return {
            inputValue: '',
            num1: 5,
            num2: 7,
          }
        },
        methods: {
          handlePlus() {
            this.$refs.todoInputRef.plus(this.num1, this.num2)

          },
        },
      })
      .component('todo-input', todoInput)
      .mount('#app')
  </script>
</body>
</html>

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

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

相关文章

Ikuai中如何添加/更换虚拟机(图文)

Ikuai配置 分区/格式化硬盘(如果已经格式化&#xff0c;无需再次格式化&#xff0c;直接传送到上传镜像) 上传镜像 ⚠️&#xff1a;如果是压缩格式&#xff0c;需要解压缩后上传&#xff0c;如这里的IMG格式。 创建虚拟机 配置虚拟机&#xff08;等待虚拟机起来后执行&#…

Vulnhub-w1r3s-editable

一、信息收集 端口扫描&#xff0c;ftp允许匿名登录&#xff0c;但是没有得到什么有用的线索 PORT STATE SERVICE VERSION 21/tcp open ftp vsftpd 2.0.8 or later | ftp-syst: | STAT: | FTP server status: | Connected to ::ffff:192.168.1.6 | …

FeatInsight: 基于 OpenMLDB 的特征平台助力高效的特征管理和编排

OpenMLDB 社区新开源了特征平台产品 - FeatInsight&#xff08;https://github.com/4paradigm/FeatInsight&#xff09;&#xff0c;是一个先进的特征存储(Feature Store)服务&#xff0c;基于 OpenMLDB 数据库实现高效的特征管理和编排功能。FeatInsight 特征平台提供简便易用…

JeecgBoot集成东方通TongRDS

TongRDS介绍 TongRDS&#xff08;简称 RDS&#xff09;是分布式内存数据缓存中间件&#xff0c;用于高性能内存数据共享与应用支持。RDS为各类应用提供高效、稳定、安全的内存数据处理能力&#xff1b;同时它支持共享内存的搭建弹性伸缩管理&#xff1b;使业务应用无需考虑各种…

Active Directory监控工具

Active Directory 是 Microsoft 为 Windows 环境实现的 LDAP 目录服务&#xff0c;它允许管理员对用户访问资源和服务实施公司范围的策略。Active Directory 通常安装在 Windows 2003 或 2000 服务器中&#xff0c;它们统称为域控制器。如果 Active Directory 出现故障&#xf…

go的协程和管道运用案例

一.同时向管道读写数据 package mainimport "fmt"func main() {writeChan : make(chan int, 20) // 写入通道&#xff0c;缓冲大小为20exitChan : make(chan bool) // 退出通道go readData(writeChan, exitChan) // 启动readData协程go writeData(writeChan) …

跑通 yolov5-7.0 项目之训练自己的数据集

yolov5 一、yolov5 源码下载二、配置环境&#xff0c;跑通项目三、训练自己的数据集1、获取验证码数据2、标注图片&#xff0c;准备数据集3、开始训练自己的数据集1、train.py 训练数据集2、val.py 验证测试你的模型3、detect.py 正式用你的模型 四、遇到的报错、踩坑1、import…

电脑内存满了怎么清理内存?试试这6个方法~

内存越大&#xff0c;运行越快&#xff0c;程序之间的切换和响应也会更加流畅。但是随着时间的增加&#xff0c;还是堆积了越来越多的各种文件&#xff0c;导致内存不够用&#xff0c;下面就像大家介绍三种好用的清理内存的方法。 方法一&#xff1a;通过电脑系统自带的性能清理…

vim 编辑器如何同时注释多行以及将多行进行空格

当然可以&#xff0c;以下是我对您的文字进行润色后的版本&#xff1a; 一、场景 YAML文件对空格的要求非常严格&#xff0c;因此在修改YAML时&#xff0c;我们可能需要批量添加空格。 二、操作步骤 请注意&#xff1a;您的所有操作都将以第一行为基准。也就是说&#xff0…

QT+OSG/osgEarth编译之七十八:hdr+Qt编译(一套代码、一套框架,跨平台编译,版本:OSG-3.6.5插件库osgdb_hdr)

目录 1、osgdb_hdr介绍 2、文件分析 3、pro文件 4、编译实践 1、osgdb_hdr介绍 通过osgdb_hdr,osg能方便地读取高动态范围图像文件,从而为三维场景渲染提供高动态范围图像的数据支撑。 HDR文件是以高动态范围 (HDR) 图像格式保存的位图图像或数码照片。这种格…

OpenCV-Python(39):Meanshift和Camshift算法

目标 学习了解Meanshift 和Camshift 算法在视频中找到并跟踪目标 Meanshift 原理 Meanshift算法是一种基于密度的聚类算法&#xff0c;用于将数据点划分为不同的类别。它的原理是通过数据点的密度分布来确定聚类中心&#xff0c;然后将数据点移动到离其最近的聚类中心&#…

【代码随想录07】344.反转字符串 541. 反转字符串II 05.替换空格 151.翻转字符串里的单词 55. 右旋转字符串

目录 344. 反转字符串题目描述做题思路参考代码 541. 反转字符串 II题目描述参考代码 05. 替换数字题目描述参考代码 151. 反转字符串中的单词题目描述参考代码 55. 右旋转字符串题目描述参考代码 344. 反转字符串 题目描述 编写一个函数&#xff0c;其作用是将输入的字符串反…

OOM分析与解决

一、分类 OOM:java.lang.OutOfMemoryError 1.1 堆内存溢出 堆内存&#xff08;Heap Space&#xff09;没有足够空间存放新创建的对象 java.lang.OutOfMemoryError:Javaheap space原因&#xff1a; 请求创建一个超大对象&#xff0c;通常是一个大数组。 超出预期的访问量/数…

C语言从入门到实战——动态内存管理

动态内存管理 前言一、 为什么要有动态内存分配二、 malloc和free2.1 malloc2.2 free 三、calloc和realloc3.1 calloc3.2 realloc 四、常见的动态内存的错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释放一块动态开…

用于自动驾驶最优间距选择和速度规划的多配置二次规划(MPQP) 论文阅读

论文链接&#xff1a;https://arxiv.org/pdf/2401.06305.pdf 论文题目&#xff1a;用于自动驾驶最优间距选择和速度规划的多配置二次规划&#xff08;MPQP&#xff09; 1 摘要 本文介绍了用于自动驾驶最优间距选择和速度规划的多配置二次规划&#xff08;MPQP&#xff09;。…

黑马程序员JavaWeb开发|案例:tlias智能学习辅助系统(6)解散部门

指路&#xff08;1&#xff09;&#xff08;2&#xff09;&#xff08;3&#xff09;&#xff08;4&#xff09;&#xff08;5&#xff09;&#x1f447; 黑马程序员JavaWeb开发|案例&#xff1a;tlias智能学习辅助系统&#xff08;1&#xff09;准备工作、部门管理_tlias智能…

MATLAB对话框与菜单设计实验

本文MATLAB源码&#xff0c;下载后直接打开运行即可[点击跳转下载]-附实验报告https://download.csdn.net/download/Coin_Collecter/88740733 一、实验目的 1.掌握建立控件对象的方法。 2.掌握对话框设计方法。 3.掌握菜单设计方法。 二、实验内容 建立如下图所示的菜单。菜单…

15.云原生之k8s容灾与恢复实战

云原生专栏大纲 文章目录 Velero与etcd介绍Velero与etcd备份应用场景Velero与etcd在k8s备份上的区别 Velero备份恢复流程备份工作流程Velero备份时&#xff0c;若k8s集群发送变化&#xff0c;会发发生情况&#xff1f;Velero 备份pv&#xff0c;pv中数据变化&#xff0c;会发发…

C# System.MissingMethodException

C#应用程序工程调用C#类库工程生成的动态链接库调试时报错&#xff1a; System.MissingMethodException HResult0xFFFFFFFF Message找不到方法…… 软件结构如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; usi…

uniapp实现微信小程序富文本之mp-html插件详解

uniapp实现微信小程序富文本之mp-html插件 1 文章背景1.1 正则表达式1.2 mp-html插件1.3 uniapp 2 过程详解2.1 下载mp-html插件2.2 项目中引入mp-html2.3 引入正则规范图片自适应2.4 效果展示 3 全部代码 1 文章背景 1.1 正则表达式 正则表达式&#xff0c;又称规则表达式,&…