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

Vue2和Vue3的emit、props、watch等知识点对比

1.props/defineProps
使用场景:

       一般当父组件需要给子组件传值的时候会用到。

        Vue2:props

vue2在父组件里引入子组件以后需要在components里面注册后再使用;

父组件
<son-compnents :info=info></son-components>import SonCompnents from "./cpmponents/SonCompnents.vue"components: {SonCompnents,},data(){return {info:'个人信息'}}
子组件
props:['info'] //数组写法
props:{info:Stirng  //对象写法
}
Vue3:defineProps

vue3的父组件引用后直接使用即可;

父组件
<son-compnents :info=info></son-components>import SonCompnents from "./cpmponents/SonCompnents.vue"
import {ref }from 'vue'
let info = ref('props传参')
子组件
<script setup>
import {ref,computed} from 'vue'
const props = defineProps({info:String
})
一般props的值就用computed来接收使用
let getInfo = computed(()=>{return props.info
})
</script>
2. emit/defineEmits
使用场景:

用于子组件向父组件传递信息,修改父组件传的props的值

Vue2:emit
子组件
<button @click="sendMes(name)">点击向父组件传值</button>data(){return{name:'子组件'}}methods:{sendMes(name){this.$emit('getMes',name)   触发父组件绑定的getMes事件从而触发对应的方法,后面是传的参数}
}
父组件<son-componet @getMes="changeMes"></son-componet>import SonComponet from '@/components/SonComponet'data(){return(){name:'原本的值'}}methods:{changeMes(name){this.name=name}}
Vue3:defineEmits
子组件
<el-button @click="sendMes">子组件给父组件传值</el-button>const emits = defineEmits(["close"]);
const sendMes = ()=>{emits("close","传的参数") //可传可不传
}
父组件<son-component @close= "changeMes"></son-component>import SonComponent from '@/components/SonComponent.vue'
import {ref} from 'vue'let mes = ref('原值')
const changeMes = (name)=>{mes.value = name }
3.watch
使用场景:

用于对数据的监听并实时做出处理;

Vue2:watch
子组件
1.监听对象的一个属性值并实时修改另一个值watch: {'form.currency': {handler(newValue, oldValue) {if (newValue == 'USD') {this.currencyType = '万美元';} else {this.currencyType = '万元';}},deep: true,},'form2.currency': {handler(newValue, oldValue) {if (newValue == 'USD') {this.currencyType = '万美元';} else {this.currencyType = '万元';}},deep: true}},
Vue3:watch

这里的场景是子组件是弹窗,父组件是表格,在表格中引入,点击编辑,子组件弹出框的数据随之更改;

子组件
import {ref,watch} from 'vue'const props = defineProps({info:Obeject
})
let info = ref({})当监听的值是一个对象的某个属性值时,watch的第一个参数就需要写成函数,其他直接写参数即可 
watch(()=>props.info   //如果只是子组件本身的一个值 name,(newValue,oldValue)=>{if(newValue){form = {name = newValue.nameprice= newValue.price}} },{     第三个对象配置watch的属性deep:true}
)
Vue3:watchEffect 

 watchEffect的作用是不需要指定需要监听的属性,而是监听一个回调,当回调内所使用的数据发生变化时,回调就会执行;

缺点:1.不会立刻执行(可用immediate)解决;2.获取不到newValue和oldValue;

更多知识点得参考其他教程

import {watchEffect,ref} from 'vue'
let a = ref(1)
let b = ref(1)const stop  =watchEffect(()=>{console.log(a,b) 一但a或b的值发生了改变,这个打印函数就会执行 })

相关文章:

Vue2和Vue3的emit、props、watch等知识点对比

1.props/defineProps 使用场景: 一般当父组件需要给子组件传值的时候会用到。 Vue2:props vue2在父组件里引入子组件以后需要在components里面注册后再使用&#xff1b; 父组件 <son-compnents :infoinfo></son-components>import SonCompnents from "./cp…...

HTML 笔记:初识 HTML(HTML文本标签、文本列表、嵌入图片、背景色、网页链接)

1 何为HTML 用来描述网页的一种语言超文本标记语言(Hyper Text Markup Language)不是一种编程语言&#xff0c;而是一种标记语言 (markup language) 2 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> 作用是为了“标记”页面中的内容&#xff0c;使…...

使用弹性盒子flex对html进行布局和动态计算视口高度

使用弹性盒子flex对html进行布局的一个练习 height: calc(100vh - 4px); # vh表示视口高度的百分比&#xff0c;所以100vh表示整个视口的高度。 .mytxt { text-indent: 2em; /* 首航缩进2字符 */ line-height: 2; /* 2倍行高 */ padding: 8px; /* 内容与边框的距离 */ } …...

华为云云耀云服务器L实例评测|华为云耀云服务器L实例评测用例(五)

六、华为云耀云服务器L实例评测用例&#xff1a; “兵马未动&#xff0c;粮草先行”&#xff0c;随着企业业务的快速发展&#xff0c;服务器在数字化建设体系至关重要&#xff0c;为了保证服务器的稳定性、可靠性&#xff0c;需要对服务器进行评测&#xff0c;以确保服务器能够…...

uniapp-vue3微信小程序实现全局分享

uniapp-vue3微信小程序实现全局分享 文章目录 uniapp-vue3微信小程序实现全局分享微信小程序官方文档的分享说明onShareAppMessage(Object object)onShareTimeline() uniapp 官方文档的分享说明onShareAppMessage(OBJECT) 实现全局分享代码结构如下share.js文件内容main.js注意…...

Qt如何实现动态背景-视频背景

前言 需求&#xff1a;加载视频作为视频背景&#xff0c;在上层可以进行图片的动画化&#xff0c;或是进行其他操作。 几种方法&#xff1a; 1、直接将视频弄成一个QDialog&#xff0c; 然后再上层在弄一个QDialog,背景透明即可。但遇到一个问题&#xff0c;QDialog没办法局…...

vue按键全屏和F11全屏共存

以下代码可直接复制 注意此段代码 // let element document.documentElement // 当前页所有元素全屏 let element document.getElementById(‘div1’) //让某个div元素全屏 <template><div><div style"width: 300px;height: 300px;background-color: cya…...

springboot就业信息管理系统springboot32

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…...

深入探讨芯片制程设备:从原理到实践

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 在现代科技领域&#xf…...

Vuex的简介以及入门案例

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Vue》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这个专栏…...

上海亚商投顾:沪指探底回升 华为汽车概念股集体大涨

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数昨日探底回升&#xff0c;早盘一度集体跌超1%&#xff0c;随后震荡回暖&#xff0c;深成指、创业板指…...

Android网络监听

1.通过注册BroadCastReceiver进行网络监听。 1) 添加网络权限 <uses-permission android:name"android.permission.INTERNET"/><uses-permission android:name"android.permission.ACCESS_NETWORK_STATE" /> 2&#xff09;定义BroadCastRe…...

Kubernetes 常用命令 持续更新

1、进入指定namespace pod kubectl exec -it --namespacekube-system g-lsb-proxy-nginx-r7zfl-2522744936-11rld /bin/sh kubectl exec -it g-lsb-proxy-nginx-r7zfl-2522744936-9tz5k -n kube-system /bin/bash2、查看k8s pod详情 kubectl describe pods -n jiankunking …...

达梦数据库常用命令行

导出dmp文件&#xff08;迁移用&#xff09; 管理工具在dmdbms下的tool文件夹下 使用tool目录下的manage程序&#xff0c;导出dmp文件 导入dmp文件 切到tool目录下 ./dimp 用户id/密码ip:5236 file"导入的文件路径(包括文件名)" 导入的模式&#xff08;一般与库名…...

【通信系列 6 -- AT 命令介绍】

文章目录 1. 背景介绍1.2 AT的命令格式1.3 AT指令用法1.3.1 指令执行结果 1.2 CP 常用AT指令1.2.1 CP 模式设置1.2.2 网络相关1.2.3 IP获取1.2.4 Band 设置1.2.5 电话相关1.2.6 SIM卡检测1.2.7 cmwap 和cmnet1.2.8 AT 写 IMEI 1. 背景介绍 AT 命令一般分为三种&#xff1a; C…...

flask捕获@app.errorhandler/@app.after_request全局异常总结

捕获处理全局异常的方法有两种&#xff1a;app.errorhandler、app.after_request1、第一种的使用&#xff0c;需要将flask的debug开关打开才能生效&#xff08;自动捕获异常&#xff09;&#xff0c;在config里面将DEBUG TRUE就可以&#xff08;默认是False&#xff09;。 但是…...

智能晾衣架丨以科技解放双手

以往的晾衣架大多是平放式、手摇式居多&#xff0c;为衣物的晾晒提供了一个“栖身之所。”随着科技的日新月异&#xff0c;智能家居的产品越来越多。晾衣架也不例外&#xff0c;一款带有语音控制升降、同时具备照明和消毒的多功能衣架也已深入生活&#xff0c;正被人们所接受。…...

asp.net饭店订餐管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio计算机设计定制

一、源码特点 asp.net 饭店订餐管理系统 是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语 言开发 asp.net饭店订餐系统 二、功能介…...

Pushgateway的场景使用

1,Pushgateway简介 Pushgateway为Prometheus整体监控方案的功能组件之一,并做为一个独立的工具存在。它主要用于Prometheus无法直接拿到监控指标的场景,如监控源位于防火墙之后,Prometheus无法穿透防火墙;目标服务没有可抓取监控数据的端点等多种情况。在类似场景中,可通…...

时间范围配置(昨天,今天,本周,本月,本季度,本年)

ranges:{ ‘昨天’: [ moment(moment().subtract(1, ‘days’).format(‘YYYY-MM-DD 00:00:00’)) ,moment(moment().subtract(1, ‘days’).format(‘YYYY-MM-DD 23:59:59’))], ‘今天’: [ moment(moment().format(‘YYYY-MM-DD 00:00:00’)),moment( moment().format(‘YYY…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...