vue子组件修改prop的值

1.通过sync修饰符配合$emit,update实现

父组件:

<template><child-view :num.sync="num"></child-view>
</template>
<script>import childView from './assembly/child'export default {components: {childView},data() {return {num: 2}}}</script>

子组件:

<template><div><p>父传过来的值:{{num}}</p><button @click="changeNum">加一</button></div>
</template><script>export default {name: 'child',props:{num: {type:Number,default: 0}},methods:{changeNum(){this.$emit("update:num",this.num + 1)}}}
</script>

2.通过v-model绑定数据源

父组件:

<template><child-view v-modal="num"></child-view>
</template>
<script>import childView from './assembly/child'export default {components: {childView},data() {return {num: 2}}}</script>

子组件:

<template><div><p>父传过来的值:{{num}}</p><input type="text" :value="value" @input="$emit('input',$event.target.value)"></div>
</template><script>export default {name: 'child',props:["value"]}
</script>

3.通过父传子,子调用父方法传参数实现

父组件:

<template><child-view :num="num" @updateNum="updateNum"></child-view>
</template>
<script>import childView from './assembly/child'export default {components: {childView},data() {return {num: 2}},methods: {updateNum(num){this.num = num}}</script>

子组件

<template><div><p>父传过来的值:{{num}}</p><button @click="changeNum">加一</button></div>
</template><script>export default {name: 'child',props:{num: {type:Number,default: 0}},methods:{changeNum(){this.$emit("updateNum",this.num + 1)}}}

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

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

相关文章

PTA 密接判定v1(close_contact1)

Omicron变种病毒传染性太强了&#xff0c;城市屡屡破防。封闭在家的我决定为防疫做点事&#xff1a;帮助筛选密切接触、次密切接触人员。 网格员提供了一些小区的风险时段内的接触记录、确诊人员&#xff0c;需要判断人员的风险分类&#xff1a; A类&#xff1a;疑似病例、临床…

Redis大key与热Key

什么是 bigkey&#xff1f; 简单来说&#xff0c;如果一个 key 对应的 value 所占用的内存比较大&#xff0c;那这个 key 就可以看作是 bigkey。具体多大才算大呢&#xff1f;有一个不是特别精确的参考标准&#xff1a; bigkey 是怎么产生的&#xff1f;有什么危害&#xff1f;…

Redis数据备份和还原

Redis SAVE 命令用于创建当前数据库的备份文件&#xff0c;文件名默认为dump.rdb。备份数据库数据可以增强对数据的保护&#xff0c;提升数据的安全性。当数据不小心丢失或者被删除时&#xff0c;我们就可以通过相应的操作进行数据恢复。本节介绍 Redis 的数据备份和数据还原操…

Android RGB转YUV的算法

将 ARGB&#xff08;Alpha-Red-Green-Blue&#xff09;颜色空间转换为 YUV&#xff08;亮度-色度&#xff09;颜色空间的常用算法有以下几种&#xff1a; 矩阵转换法 使用预定义的转换矩阵将 RGB 值转换为 YUV 值。其中&#xff0c;Y 表示亮度&#xff0c;U 和 V 表示色度。这…

MySQL表的操作『增删改查』

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; MySQL 学习 &#x1f383;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 &#x1f381;软件版本&#xff1a; MySQL 5.7.44 文章目录 1.创建表1.1.创建时指定属性 2.查看表2.1.查看表结构2.2.查看建表信息…

【SpringCloud】为什么选择微服务?

一般的平台会遇到的问题&#xff1a; 服务配置复杂。基础服务多&#xff0c;服务的资源配置复杂&#xff0c;传统方式管理服务复杂 服务之间调用复杂。检索服务、用户中心服务等&#xff0c;服务之间的调用复杂&#xff0c;依赖多 服务监控难度大。服务比较多&#xff0c;…

MYSQL基础知识之【数据类型】

文章目录 前言标题一数值类型日期和时间类型字符串类型后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;Mysql &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错…

CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

一、web 设置placeholder 设置浏览器的placeholder样式 ::-webkit-input-placeholder { /* WebKit browsers */color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19 */color: #999; } :-ms-input-p…

「最优化基础知识2」一维搜索,以及python代码

最优化基础知识&#xff08;2&#xff09; 无约束优化问题&#xff0c;一维搜索 一、一维搜索 一维搜索的意思是在一个方向上找到最小点。 用数学语言描述&#xff0c;X*Xk tPk&#xff0c;从Xk沿着Pk方向行走t到达最小点X*。 1、收敛速度&#xff1a; 线性收敛&#xff1…

Python与设计模式--建造者模式

3-Python与设计模式–建造者模式 一、快餐点餐系统 今天的例子&#xff0c;还是上一次谈到的快餐点餐系统。只不过&#xff0c;今天我们从订单的角度来构造这个系统。 最先还是有请上次的主角们&#xff1a; 主餐&#xff1a; class Burger():name""price0.0def g…

基于厨师算法优化概率神经网络PNN的分类预测 - 附代码

基于厨师算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于厨师算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于厨师优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络的光滑…

redis持久化:RDB:和AOF

目录 RDB 持久化 1、修改配置文件&#xff1a;redis.conf 2、RDB模式自动触发保存快照 3、RDB模式手动触发保存快照 4、RDB的优缺点 AOF持久化 1、AOF持久化工作流程 2、修改配置文件开启AOF 3、AOF优缺点 4、AOF的重写机制原理 RDBAOF混合模式 redis持久化有两种方…

《尚品甄选》:后台系统——结合redis实现用户登录

文章目录 一、统一结果实体类二、统一异常处理三、登录功能实现四、CORS解决跨域五、图片验证码六、登录校验功能实现6.1 拦截器开发6.2 拦截器注册 七、ThreadLocal 要求&#xff1a; 用户输入正确的用户名、密码以及验证码&#xff0c;点击登录可以跳转到后台界面。未登录的用…

Map循环注意事项

在使用map()方法进行循环遍历时&#xff0c;有一些注意事项需要注意&#xff1a; 给每个生成的元素添加唯一的key属性&#xff1a; 在使用map()方法生成组件列表时&#xff0c;为了帮助React准确地识别和更新每个组件&#xff0c;需要为每个生成的元素&#xff08;组件&#x…

802.11 帧的Reason Code 位和Status Code 位

Reason Code 位 当对方不适合加入网络时&#xff0c;工作站会送出 Disassociation&#xff08;解除连接&#xff09;或 Deauthentication&#xff08;解除身份认证&#xff09;帧作为应答。这些帧当中包含一个长度 16bit 的 Reason Code&#xff08;原因代码&#xff09;位&am…

基于人工兔算法优化概率神经网络PNN的分类预测 - 附代码

基于人工兔算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于人工兔算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于人工兔优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…

P10 C++类和结构体的区别

目录 01 前言 02 struct 与 class格式上的区别 03 struct 与 class 使用上的区别 04 常用的代码风格 01 前言 今天这期我们主要解决一个问题&#xff0c;就是 C 中的类和结构体有什么区别。 本期我们有两个术语&#xff0c;结构体 struct&#xff0c;它是 structure 的缩写…

深度学习之基于Tensorflow银行卡号码识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介银行卡号码识别的步骤TensorFlow的优势 二、功能三、系统四. 总结 一项目简介 # 深度学习基于TensorFlow的银行卡号码识别介绍 深度学习在图像识别领域取得…

【GridSearch】 简单实现并记录运行效果

记录了使用for循环实现网格搜索的简单框架。 使用df_search记录每种超参数组合下的运行结果。 lgb_model.best_score返回模型的最佳得分 lgb_model.best_iteration_返回模型的最佳iteration也就是最佳n_extimator import numpy as np import pandas as pd import lightgbm as …

【JVM】一篇通关JVM垃圾回收

目录 1. 如何判断对象可以回收1-1. 引用计数法1-2. 可达性分析算法1-3. 四种引用强引用软引用弱引用虚引用终结器引用 2. 垃圾回收算法3. 分代垃圾回收4. 垃圾回收器5. 垃圾回收调优 1. 如何判断对象可以回收 1-1. 引用计数法 引用计数法 只要一个对象被其他变量所引用&…