当前位置: 首页 > news >正文

Vue3 defineProps使用

MyTag.vue

<script setup>
import { ref, nextTick, defineProps, defineEmits } from "vue";
const props = defineProps({flag: Boolean,title: String,
});
// 写成这样也可以
// const props = defineProps(["flag", "title"]);const emit = defineEmits(["changeFlag"]);
const inp = ref(null);
const newTitle = ref("");
const changeName = () => {console.log("props", props);emit("changeName", newTitle.value);emit("changeFlag", !props.flag);
};
const dblfun = () => {newTitle.value = props.title;emit("changeFlag", !props.flag);nextTick(() => {inp.value.focus();});
};
const funBlur = () => {console.log("Blur" + newTitle.value);emit("changeFlag", true);
};
</script><template><div class="app"><div v-show="flag" @dblclick="dblfun"><h1>{{ title }}</h1></div><div v-show="!flag"><inputref="inp"v-model="newTitle"@keyup.enter="changeName"@blur="funBlur"type="text"/></div></div>
</template><style scoped>
.son1 {width: 100%;height: 150px;border: 3px red solid;
}
</style>

父组件
App.vue

<script setup>
import MyTag from "./components/MyTag.vue";
import { ref } from "vue";
const flag = ref(true);
const title = ref("slx");
const changeFlag = (tt) => {flag.value = tt;
};
const changeName = (tt) => {console.log("tt", tt);title.value = tt;
};
</script><template><div class="app"><MyTag@changeFlag="changeFlag"@changeName="changeName":flag="flag":title="title"></MyTag></div>
</template><style scoped>
.son1 {width: 100%;height: 150px;border: 3px red solid;
}
</style>

相关文章:

Vue3 defineProps使用

MyTag.vue <script setup> import { ref, nextTick, defineProps, defineEmits } from "vue"; const props defineProps({flag: Boolean,title: String, }); // 写成这样也可以 // const props defineProps(["flag", "title"]);const e…...

机器学习7:逻辑回归

一、说明 逻辑回归模型是处理分类问题的最常见机器学习模型之一。二项式逻辑回归只是逻辑回归模型的一种类型。它指的是两个变量的分类&#xff0c;其中概率用于确定二元结果&#xff0c;因此“二项式”中的“bi”。结果为真或假 — 0 或 1。 二项式逻辑回归的一个例子是预测人…...

生活小记-纸张尺寸

A系列纸张&#xff1a; A0&#xff1a;841 x 1189 毫米A1&#xff1a;594 x 841 毫米A2&#xff1a;420 x 594 毫米A3&#xff1a;297 x 420 毫米A4&#xff1a;210 x 297 毫米A5&#xff1a;148 x 210 毫米A6&#xff1a;105 x 148 毫米A7&#xff1a;74 x 105 毫米A8&#xf…...

【MATLAB源码-第41期】基于压缩感知算法的OFDM系统信道估计和LS算法对比仿真。

操作环境&#xff1a; MATLAB 2013b 1、算法描述 压缩感知&#xff08;Compressed Sensing, CS&#xff09;是一种从稀疏或可压缩信号中重构完整信号的数学理论和技术。下面详细介绍压缩感知和它在OFDM信道估计中的应用。 1. 压缩感知基本概念 在传统采样理论中&#xff0…...

优思学院|六西格玛将烹饪和美味提升至极致

最近&#xff0c;我们曾提到一个美国男子如何利用六西格玛来控制糖尿病。这表明六西格玛逐渐被认为是一个不仅可以在工作场所之外使用&#xff0c;尤其不仅限于制造业的系统。 六西格玛的核心理念是改进过程的质量&#xff0c;从而改善最终结果。如果你做了晚餐或尝试了一道新…...

git stash

git stash 是 Git 中一个非常有用的命令&#xff0c;用于临时保存当前工作目录中的修改&#xff0c;以便你可以切换到其他分支或处理其他任务而不丢失你的修改。它的主要用途是&#xff1a; 保存未提交的修改&#xff1a;你可以使用 git stash 命令将未提交的修改&#xff08;包…...

Flink Data Source

Flink Data Source 一、内置 Data Source Flink Data Source 用于定义 Flink 程序的数据来源,Flink 官方提供了多种数据获取方法,用于帮助开发者简单快速地构建输入流,具体如下: 1.1 基于文件构建 1. readTextFile(path):按照 TextInputFormat 格式读取文本文件,并将…...

怒刷LeetCode的第23天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;贪心算法 方法二&#xff1a;动态规划 方法三&#xff1a;回溯算法 方法四&#xff1a;并查集 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;排序和遍历 方法二&#xff1a;扫描线算法 方法…...

Golang 中的调试技巧

掌握有效的策略和工具&#xff0c;实现顺畅的开发 调试是每位开发人员都必须掌握的关键技能。它是识别、隔离和解决代码库中问题的过程。在 Golang 的世界中&#xff0c;掌握有效的调试技巧可以显著提升您的开发工作流程&#xff0c;并帮助您创建更可靠和健壮的应用程序。在本…...

linux 监控内存利用率

监控内存利用率 使用free来分析CPU使用信息 #!/bin/bashDATE$(date %F" "%H:%M)IP$(ifconfig eth0 |awk -F [ :] /inet addr/{print $4}) MAIL"examplemail.com"TOTAL$(free -m |awk /Mem/{print $2})USE$(free -m |awk /Mem/{print $3-$6-$7})FREE$(($TO…...

43 验证二叉搜索树

验证二叉搜索树 理解题意&#xff1a;验证搜索二叉树&#xff1a;中序遍历是升序题解1 递归&#xff08;学习学习&#xff01;&#xff09;题解2 中序遍历&#xff08;保持升序&#xff09; 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个 有效的二叉搜索树。 有…...

深度学习笔记之微积分及绘图

深度学习笔记之微积分及绘图 学习资料来源&#xff1a;微积分 %matplotlib inline from matplotlib_inline import backend_inline from mxnet import np, npx from d2l import mxnet as d2lnpx.set_np()def f(x):return 3 * x ** 2 - 4 * xdef numerical_lim(f, x, h):retur…...

java Spring Boot按日期 限制大小分文件记录日志

上文 java Spring Boot 将日志写入文件中记录 中 我们实现另一个将控制台日志写入到 项目本地文件的效果 但是 这里有个问题 比如 我项目是个大体量的企业项目 每天会有一百万用户访问 那我每天的日志都记载同一个文件上 那不跟没记没什么区别吗&#xff1f; 东西怎么找&#x…...

CSS 语法

CSS 实例 CSS 规则由两个主要的部分构成&#xff1a;选择器&#xff0c;以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性&#xff08;property&#xff09;是您希望设置的样式属性&#xff08;style attribute&#x…...

Vue3+TS+ECharts5实现中国地图数据信息显示

1.引言 最近在做一个管理系统&#xff0c;主要技术栈使用的是Vue3TSViteElementPlus&#xff0c;主要参考项目是yudao-ui-admin-vue3&#xff0c;其中用到ECharts5做数字大屏&#xff0c;展示中国地图相关信息&#xff0c;以此基础做一个分享&#xff0c;写下这篇文章。 &quo…...

PowerShell 内网不能直接安装SqlServer模块的处理办法

PowerShell 内网不能直接安装SqlServer模块的处理办法 文章目录 下载sqlserver module安装sqlserver module导入和验证sqlserver 模块推荐阅读 下载sqlserver module 首先先将sqlserver.nupkg下载到本地&#xff0c;我是放到了C:\windows\system32目录下。 PowerShell Galler…...

Git使用【下】

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;标签管理理解标签标签运用 …...

自然语言处理的分类

动动发财的小手&#xff0c;点个赞吧&#xff01; 简介 作为理解、生成和处理自然语言文本的有效方法&#xff0c;自然语言处理&#xff08;NLP&#xff09;的研究近年来呈现出快速传播和广泛采用。鉴于 NLP 的快速发展&#xff0c;获得该领域的概述并对其进行维护是很困难的。…...

Flutter笔记:手写并发布一个人机滑动验证码插件

Flutter笔记 手写一个人机滑块验证码 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/133529459 写 Flut…...

RabbitMQ安装与简单使用

安装 下载资源 可以访问官网查看下载信息rabbitmq官网 选择合适的版本&#xff0c;注意&#xff1a;rabbitmq需要下载一个Erlang才能使用 我自己是在一下两个连接中下载的 rabbitmq 3.8.8 erlang 21.3.8.15 需要下载其他版本的同学注意erlang版本是否匹配&#xff0c;可以访…...

新手友好:在快马平台用mc、jc相关案例轻松上手前端开发

作为一个刚接触前端开发的新手&#xff0c;我最近在InsCode(快马)平台尝试做了一个特别适合练手的小工具——代码行数统计器。这个项目用最基础的HTML、CSS和JavaScript实现&#xff0c;但包含了前端开发的几个核心概念&#xff0c;特别适合想通过实际案例学习的朋友。 项目功能…...

深入OpenBMC构建系统:Yocto项目与BitBake实战解析(以Romulus平台为例)

深入OpenBMC构建系统&#xff1a;Yocto项目与BitBake实战解析&#xff08;以Romulus平台为例&#xff09; 在服务器硬件管理领域&#xff0c;OpenBMC作为开源基板管理控制器固件堆栈&#xff0c;正逐渐成为企业级设备的标准配置。不同于简单的固件烧录&#xff0c;OpenBMC的构建…...

Qwen3-32B-Chat微调实战:提升OpenClaw代码生成任务的准确性

Qwen3-32B-Chat微调实战&#xff1a;提升OpenClaw代码生成任务的准确性 1. 为什么需要微调Qwen3-32B-Chat&#xff1f; 去年夏天&#xff0c;当我第一次尝试用OpenClaw自动化我的开发工作流时&#xff0c;遇到了一个令人沮丧的问题&#xff1a;模型生成的代码虽然语法正确&am…...

Apache Doris 存储与查询优化实战:从架构设计到性能调优的完整指南

1. Apache Doris 架构设计精要 第一次接触Apache Doris时&#xff0c;我被它简洁的架构设计惊艳到了。这个MPP架构的分析型数据库&#xff0c;用计算存储分离的设计思路&#xff0c;把复杂的大数据分析变得像查普通MySQL表一样简单。FE&#xff08;Frontend&#xff09;和BE&am…...

零代码也能构建智能登录系统?Dify工作流让你告别繁琐的前端开发

零代码也能构建智能登录系统&#xff1f;Dify工作流让你告别繁琐的前端开发 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程&#xff0c;自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awes…...

Xenium空间原位转录组:从数据到生物学发现的实战解析

1. Xenium平台与空间原位转录组技术初探 第一次接触Xenium平台的数据时&#xff0c;我被它呈现的空间基因表达图谱震撼到了。想象一下&#xff0c;这就像给组织切片拍了一张"基因表达照片"&#xff0c;每个像素点都记录着成百上千个基因的活动状态。10x Genomics推出…...

AI首推路径控制引擎

AI首推路径控制引擎版本&#xff1a;v2.0.0 发布日期&#xff1a;2026年3月26日 发布状态&#xff1a;正式全量发布---一、背景与概述在AI生成式应用中&#xff0c;模型输出的随机性与不可控性一直是业务落地的核心痛点。为解决“如何让AI严格遵循预设逻辑生成答案”的问题&…...

so-vits-svc声压级标准化终极指南:如何避免AI语音转换中的音频质量损伤

so-vits-svc声压级标准化终极指南&#xff1a;如何避免AI语音转换中的音频质量损伤 【免费下载链接】so-vits-svc SoftVC VITS Singing Voice Conversion 项目地址: https://gitcode.com/gh_mirrors/so/so-vits-svc so-vits-svc作为当前最先进的AI歌声转换框架&#xff…...

OpenClaw+Qwen3.5-4B-Claude:个人知识库自动更新系统

OpenClawQwen3.5-4B-Claude&#xff1a;个人知识库自动更新系统 1. 为什么需要自动化知识管理 作为一个技术从业者&#xff0c;我每天都会接触到大量信息——技术博客、论文摘要、行业动态、代码库更新等等。过去三年里&#xff0c;我尝试过各种笔记工具和知识管理方法&#…...

最完整的大模型算法工程师技术栈图谱(2026版)

目录 一、基础能力&#xff08;所有AI工程师的底座&#xff09; 1 编程语言 2 数据结构与算法 3 数学基础 二、深度学习基础 深度学习模型基础 三、大模型核心技术 1 Transformer架构 2 预训练 3 Tokenizer 四、大模型训练体系 1 分布式训练 2 训练优化技术 3 微…...