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>

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

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

相关文章

互联网Java工程师面试题·MyBatis 篇·第二弹

目录 16、Xml 映射文件中&#xff0c;除了常见的 select|insert|updae|delete标签之外&#xff0c;还有哪些标签&#xff1f; 17、Mybatis 的 Xml 映射文件中&#xff0c;不同的 Xml 映射文件&#xff0c;id 是否可以重复&#xff1f; 18、为什么说 Mybatis 是半自动 ORM 映射…

2023年中国体育赛事行业现状及趋势分析:体育与科技逐步融合,推动产业高质量发展[图]

体育赛事运营是指组织体育赛事或获取赛事版权&#xff0c;并进行赛事推广营销、运营管理等一系列商业运作的运营活动。体育赛事运营相关业务主要包括赛事运营与营销、赛事版权运营两个部分。 体育赛事运营行业分类 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#x…

5.外部中断

中断初始化配置步骤&#xff1a; IO口初始化配置 开启中断总允许EA 打开某个IO口的中断允许 打开IO口的某一位的中断允许 配置该位的中断触发方式 中断函数&#xff1a; #pragma vector PxINT_VECTOR __interrupt void 函数名(void){}#pragma vector PxINT_VECTOR __int…

开源白板工具 Excalidraw 架构解读

本文讲解开源白板工具 Excalidraw 的架构设计。 版本 0.16.1 技术栈 Vite React TypeScript Yarn Husky。 脚手架原来是用的是 Create React App&#xff0c;但这个脚手架已经不维护了&#xff0c;一年多没发布新版本了。 目前市面上比较流行的 React 脚手架是 Vite&…

RabbitMQ的基本介绍

什么是MQ 本质是一个队列&#xff0c;只不过队列中存放的信息是message罢了&#xff0c;还是一种跨进程的通信机制&#xff0c;用于上下游传递信息。在互联网架构中&#xff0c;MQ是一种非常常见的上下游“逻辑解耦物理解耦”的消息通信服务。使用了MQ之后&#xff0c;信息发送…

嵌入式Linux应用开发-驱动大全-同步与互斥④

嵌入式Linux应用开发-驱动大全-同步与互斥④ 第一章 同步与互斥④1.5 自旋锁spinlock的实现1.5.1 自旋锁的内核结构体1.5.2 spinlock在UP系统中的实现1.5.3 spinlock在SMP系统中的实现 1.6 信号量semaphore的实现1.6.1 semaphore的内核结构体1.6.2 down函数的实现1.6.3 up函数的…

户用储能争斗:华宝新能“稳”、正浩科技“快”、安克创新“急”

便携式储能市场一片红海&#xff0c;户用储能&#xff08;家用储能&#xff09;成为储能企业新的“格斗场”。 过去两年&#xff0c;房车游、户外旅行、露营等旅游项目热度攀升&#xff0c;户外用电需求与日俱增&#xff0c;嗅觉敏锐的资本方相继加码便携储能市场&#xff0c;越…

玩转Mysql系列 - 第26篇:聊聊mysql如何实现分布式锁?

这是Mysql系列第26篇。 本篇我们使用mysql实现一个分布式锁。 分布式锁的功能 分布式锁使用者位于不同的机器中&#xff0c;锁获取成功之后&#xff0c;才可以对共享资源进行操作 锁具有重入的功能&#xff1a;即一个使用者可以多次获取某个锁 获取锁有超时的功能&#xff…

【贪心的商人】python实现-附ChatGPT解析

1.题目 贪心的商人 知识点:贪心 时间限制:1s 空间限制: 256MB 限定语言:不限 题目描述: 商人经营一家店铺,有number种商品,由于仓库限制 每件商品的最大持有数量是item[index], 每种商品的价格在每天是item_price[item_index][day], 通过对商品的买进和卖出获取利润,请给…

去外地旅游遇到的问题和心得

去外地旅游核心的问题是&#xff1a;住、行、食三块&#xff0c;由于去一个陌生的城市&#xff0c;一切都不熟悉&#xff0c;也没有认识的人&#xff0c;所以一切都需要自己解决&#xff0c;而住、行、食就成最核心的问题&#xff0c;下面分别说明&#xff1a; 1 住&#xff0…

WordPress批量给没有图片的文章自动添加图片配图

每次写文章配图巨麻烦&#xff0c;特别是有些人批量采集文章&#xff0c;不可能一个个去配图&#xff0c;那么有没有什么方法能批量给WordPress没有图片的文章自动添加图片&#xff0c;并且还要自动识别该文章有没有图片&#xff0c;如果没有图片才自动配图&#xff0c;如果有图…

用于工业物联网和自动化的 Apache Kafka、KSQL 和 Apache PLC4

由于单一系统和专有协议&#xff0c;数据集成和处理是工业物联网&#xff08;IIoT&#xff0c;又名工业 4.0 或自动化工业&#xff09;中的巨大挑战。Apache Kafka、其生态系统&#xff08;Kafka Connect、KSQL&#xff09;和 Apache PLC4X 是以可扩展、可靠和灵活的方式实现端…

基础-MVP定位-找边算子

找边算子基于卡尺工具来检测边缘特征。 参数配置和应用&#xff1a; 期望的线段&#xff0c; 可以直接配置卡尺的起始点和终止点坐标&#xff0c;将卡尺移动到指定边上。 蓝色线为期望线&#xff0c;绿色线为找到的边。 找边模式&#xff1a;0/1 卡尺配置&#xff1a;设置 …

【文献阅读】Pocket2Mol : 基于3D蛋白质口袋的高效分子采样 + CrossDocked数据集说明

Pocket2Mol: Efficient Molecular Sampling Based on 3D Protein Pockets code&#xff1a; GitHub - pengxingang/Pocket2Mol: Pocket2Mol: Efficient Molecular Sampling Based on 3D Protein Pockets 所用数据集 与“A 3D Generative Model for Structure-Based Drug Desi…

(零)如何做机器视觉项目

文章目录 1 项目的前期准备1.1 从5个方面初步分析客户需求1.2 方案评估与验证1.3 签订合同 2 项目规划2.1 定义客户端的详细需求2.2 制定项目管理计划2.3 方案评审 3 详细设计3.1 硬件设备的选择与环境搭建3.2 软件开发平台与开发工具的选择3.3 机器视觉系统的整体框架与开发流…

MySQL进阶 —— 超详细操作演示!!!(下)

MySQL进阶 —— 超详细操作演示&#xff01;&#xff01;&#xff01;&#xff08;下&#xff09; 五、锁5.1 概述5.2 全局锁5.3 表级锁5.4 行级锁 六、InnoDB 引擎6.1 逻辑存储结构6.2 架构6.3 事务原理6.4 MVCC 七、MySQL 管理7.1 系统数据库7.2 常用工具 MySQL— 基础语法大…

使用代理IP进行安全高效的竞争情报收集,为企业赢得竞争优势

在激烈的市场竞争中&#xff0c;知己知彼方能百战百胜。竞争对手的信息对于企业来说至关重要&#xff0c;它提供了洞察竞争环境和市场的窗口。在这个信息时代&#xff0c;代理IP是一种实用的工具&#xff0c;可以帮助企业收集竞争对手的产品信息和营销活动数据&#xff0c;为企…

Linux UWB Stack实现——MCPS接口

本专栏主要介绍在Linux内核中的UWB Stack的实现&#xff0c;整体基于IEEE 802.15.4框架&#xff0c;采用Qorvo UWB芯片DW3000&#xff0c;开源协议版本为GPLv2。 在本篇文章中&#xff0c;主要介绍MCPS接口的定义&#xff0c;MCPS&#xff08;MAC Common Part Sublayer&#xf…

python二次开发CATIA:根据已知数据点创建曲线

已知数据点存于Coords.txt文件如下&#xff1a; 8.67155477658819,20.4471021292557,0 41.2016126836927,20.4471021292557,0 15.9568941320569,-2.93388599177698,0 42.2181532110364,-6.15301746150354,0 43.0652906622083,-26.4843096139083,0 -31.6617679595947,-131.1513…

分类预测 | MATLAB实现NGO-CNN北方苍鹰算法优化卷积神经网络数据分类预测

分类预测 | MATLAB实现NGO-CNN北方苍鹰算法优化卷积神经网络数据分类预测 目录 分类预测 | MATLAB实现NGO-CNN北方苍鹰算法优化卷积神经网络数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现NGO-CNN北方苍鹰算法优化卷积神经网络数据分类预测&…