uniapp的父传子,子传父,子组件与父组件数据同步(.sync)的理解

news2024/12/29 10:45:56

父传子:
父调用 绑定的子组件中state然后 mystate1赋值false 给子组件中的state。并在子组件中显示父中传来的值。
注意要在子组件中设置 props【属性】不然父中的值无法传过去。

<view >开启{{mystate1}}</view>
--调用子组件mypop,并传值 "state"
<mypop :state.sync="mystate1" ></mypop>
--在父组件中mystate1是false
data() {
			return {
				mystate1:false
			};
		},

接下来传值给子组件,并显示子组件中传的值"state"

<view>
		<view>---弹出框--父-{{state}}--子{{state_sun}}</view>
	</view>
</template>

<script>
	export default {
		name:"mypop",
		data() {
			return {		
			};
		},
		props:{
			state:{
				type:Boolean,
				default:true
			},
			state_sun:{
				type:Boolean,
				default:true
			},
		},

这里可以看出,子中state原状态为true,父传了false,最后在子组件中显示为false,同时子组件有个state_sun定义是true显示是true。
在这里插入图片描述
子传父:
只要加个$emit,然后加上参数和值

父中的页面:
定义openMsg方法绑定给@getMsg,其中getMsg是子组件中的方法函数。通过@使用。

<comp :name="name" @getMsg="openMsg"></comp>

然后写openMsg方法:打印传过来的值,msg是子组件中传来的值,msg是可以随意取的。

methods: {
		openMsg(msg) {
			console.log(msg)
		}
	}

子组件中

methods: {
	sendMsg() {
		//子传父
		this.$emit('getMsg', "我是子,"+this.name);
	}
}

父组件调用子组件的sendMsg方法,并绑定给自己的openMsg方法,然后子组件中传来的值 【“我是子,”+this.name】通过console打印出来。

子组件与父组件数据同步(.sync)
一般子与父数据同步用sync比较简单。
只要在 e m i t 中加个 u p d a t e 参数就可以了。可以认为父中 s t a t e 【 : s t a t e . s y n c = " m y s t a t e 1 " 】传值给子,子中的 s t a t e 显示 f a l s e ,然后子传值给父【 u p d a t e : s t a t e " , f a l s e 】,父中的 m y s t a t e 1 变成了 f a l s e 。只需要在父中添加 : s t a t e . s y n c ,子中添加 t h i s . emit中加个update参数就可以了。 可以认为父中state【:state.sync="mystate1"】传值给子,子中的state显示false ,然后子传值给父【update:state",false】, 父中的 mystate1变成了false。 只需要在父中 添加:state.sync ,子中添加 this. emit中加个update参数就可以了。可以认为父中state:state.sync="mystate1"】传值给子,子中的state显示false,然后子传值给父【update:state",false】,父中的mystate1变成了false。只需要在父中添加:state.sync,子中添加this.emit(“update:state”,值)和属性 props:{ state:{ type:Boolean, default:true },即可。

子组件中:

this.$emit("update:state",false)

父组件中

<button @click="clickBtn">开启{{mystate1}}</button>
<mypop :state.sync="mystate1" ></mypop>

这样子组件中的state中的值就给父组件。

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

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

相关文章

学习记录673@项目管理之进度管理案例

本文主要是进度管理之关键链路法的案例。 案例 Perfect 项目的建设方要求必须按合同规定的期限交付系统&#xff0c;承建方项目经理李某决定严格执行项目进度管理&#xff0c;以保证项目按期完成。他决定使用关键路径法来编制项目进度网络图。在对工作分解结构进行认真分析后&…

05 二叉树前序/中序/后序线索化和找前驱、后继

1. 线索化代码 线索化需要先序/中序/后续遍历的过程&#xff0c;多了访问到节点时指针指向的问题 二叉树形状和运行结果 主函数 #include "func.h"// 二叉树线索化(便于找前驱和后继节点) // 1. 二叉树先序线索化 // 2. 二叉树中序线索化 // 3. 二叉树后序线索化//…

《MySQL》MySQL简单操作

最近开始了新的学习进度 进入MySQL数据库的学习 目录 一、MySQL启动方法 1.使用MySQL启动 2.使用cmd启动 二、数据库的简单操作命令 显示当前服务器上有哪些数据库 创建新的数据库 删除数据库 选中数据库 三、数据表的操作 数据类型 四、表的简单操作 查看数据库中的…

Java多线程-线程的生命周期

Java多线程-线程的生命周期 线程的状态 New 表示线程已创建&#xff0c;没启动的状态此时已经做了一些准备工作&#xff0c;还没有执行run方法中代码 Runnable 调用start方法之后的状态&#xff0c;表示可运行状态(不一定正在运行&#xff0c;因为调用start方法之后不一定立…

分享148个ASP源码,总有一款适合您

ASP源码 分享148个ASP源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c; 148个ASP源码下载链接&#xff1a;https://pan.baidu.com/s/1e2PvBmXxZA8C3IelkP8ZtQ?pwdj7lp 提取码&#x…

node.js 安装步骤

1、下载安装包 Node.js 官方网站下载&#xff1a;Node.js 选择操作系统对应的包&#xff1a; 下载完成&#xff0c;安装包如下&#xff1a; 2、安装Node 打开安装&#xff0c;傻瓜式下一步即可&#xff1a; 选择安装位置&#xff0c;我这里装在D盘下&#xff1a; 安装成功&…

图和树基础算法笔记

图的大部分知识在《离散数学》中都已经学习了&#xff0c;所以我主要放一些不知道的知识 常用概念 有很少边或弧&#xff08;如 e < n log n&#xff0c;e指边数&#xff0c;n指顶点数&#xff09;的图称为稀疏图&#xff0c;反之称为稠密图。完全图&#xff1a;每个顶点的…

[引擎开发] 现代图形API - dx12篇

本文将从性能优化的角度去阐述像dx12这样的现代图形API的一些设计理念。 当我们深入优化渲染管线的时候&#xff0c;我们会发现存在的几个瓶颈主要是这样的&#xff1a; ① 线程存在不合理的等待 ② CPU向GPU编码传输数据非常耗时 ③ CPU频繁地切换渲染上下文非常耗时 因此有时…

Python---库的使用

专栏&#xff1a;python 个人主页&#xff1a;HaiFan. 专栏简介&#xff1a;本专栏主要更新一些python的基础知识&#xff0c;也会实现一些小游戏和通讯录&#xff0c;学时管理系统之类的&#xff0c;有兴趣的朋友可以关注一下。 库前言标准库使用import导入模块例1例2例3 文件…

老司机经验分享:生产级中间件系统架构设计实践

目录 1、Master-Slave架构2、异步日志持久化机制3、检查点机制&#xff1a;定时持久化全量数据4、引入检查点节点5、总结 & 思考 这篇文章&#xff0c;给大家来聊一个生产级的中间件系统的架构设计实践&#xff0c;希望给对中间件系统感兴趣的同学一点启发。 1、Master-S…

【Java|golang】1663. 具有给定数值的最小字符串---int32切片类型转化string

小写字符 的 数值 是它在字母表中的位置&#xff08;从 1 开始&#xff09;&#xff0c;因此 a 的数值为 1 &#xff0c;b 的数值为 2 &#xff0c;c 的数值为 3 &#xff0c;以此类推。 字符串由若干小写字符组成&#xff0c;字符串的数值 为各字符的数值之和。例如&#xff…

修改VS2015的文件编码格式为utf8,解决在Ubuntu下中文输出为乱码的问题

开发环境&#xff1a; Windows系统&#xff1a;Windows 10 家庭版&#xff0c;VS2015社区版 Linux系统&#xff1a;Ubuntu 22.04 LTS Server版&#xff0c;gcc version 11.3.0 (Ubuntu 11.3.0-1ubuntu1~22.04) 今天编写跨平台的代码&#xff0c;在Windows下用VS2015编写&a…

C++ AVL树

前言 众所周知红黑树是由AVL树改进得来的&#xff0c;想要深入学习哈希表的底层存储那么AVL的学习就相当有必要了。 本来想将AVL的插入删除都能实现&#xff0c;但是在写删除功能时碰到了难题和Bug&#xff0c;所以暂时先给出插入的实现过程&#xff0c;和删除功能的实现思路 …

【日常系列】LeetCode《29·动态规划4》

数据规模->时间复杂度 <10^4 &#x1f62e;(n^2) <10^7:o(nlogn) <10^8:o(n) 10^8<:o(logn),o(1) 内容 字符串/数组dp问题 动态规划中的双状态问题 lc 139【top100】&#xff1a;单词拆分 https://leetcode.cn/problems/word-break/ 提示&#xff1a; 1 <…

Qt扫盲-QHttpPart类理论总结

QHttpPart类理论总结一、概述二、使用1. 设置头2. 设置内容一、概述 QHttpPart类保存一个主体部分&#xff0c;用于HTTP multipart MIME消息中(由QHttpMultiPart类表示)。 QHttpPart由一个头块和一个数据块组成&#xff0c;它们由两个连续的新行相互分隔。一个部分的例子是: …

智能合约开发——Sui/Move vs. Solana/Rust

1. 引言 前序博客有&#xff1a; zkMove——针对Move合约生态的zkVM 定位为高性能L1的Aptos和Sui&#xff0c;均采用Move合约编程语言。Solana也定位为高性能L1&#xff0c;但其采用Rust合约编程语言。本文重点对比Sui/Move和Solana/Rust合约编程语言。【Aptos/Move为不同的M…

三、Java框架之SpringMVC1_MVC基础

文章目录1. SpringMVC简介1.1 回顾Servlet技术1.2 SpringMVC入门案例步骤1&#xff1a;创建javaweb项目&#xff0c;并导入jar包步骤2&#xff1a;创建Controller步骤3&#xff1a;创建SpringMVC的配置文件步骤4&#xff1a;使用配置类替换web.xml步骤5&#xff1a;启动项目并访…

PyTorch深度学习实践第二讲线性模型

目录监督学习四步骤线性模型泛化代码作业监督学习四步骤 DataSet&#xff08;数据集&#xff09;Model&#xff08;模型选择和设计&#xff0c;例如神经网络&#xff0c;决策树等&#xff09;Training&#xff08;大部分模型都需要训练&#xff0c;都有些例如KNN不需要训练&am…

BFS(四)127. 单词接龙、433. 最小基因变化

目录 127. 单词接龙 433. 最小基因变化 127. 单词接龙 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> ... -> sk&#xff1a; 每一对相邻的单词只差一个字母。 对于 1 < i < k 时&am…

Qt 6.x中Qt Quick简介及示例

Qt Quick首次在Qt 4.7和Qt Creator 2.1中引入&#xff0c;是一种高级UI技术。 Qt Quick模块是用于编写QML(Qt Meta-Object Language, Qt元对象语言)应用程序的标准库。Qt QML模块提供了QML引擎(engine)和语言基础设施&#xff0c;而Qt Quick模块提供了使用QML创建用户界面…