uniapp props、$ref、$emit、$parent、$child、$on

1. uniapp props、ref、ref、refemit、parent、parent、parentchild、$on

1.1. 父组件和子组件

在这里插入图片描述

  propsPage.vue导入props-son-view.vue组件的时候,我们就称index.vue为父组件依次类推,在vue中只要能获取到组件的实例,那么就可以调用组件的属性或是方法进行操作

1.2. props(一般用来单向传值)

  props最适合传递数据,它并不能调用子组件里的属性和方法

1.2.1. 何为单向传值?

  即父组件传值给子组件(首次)但不能动态(再次)改变子组件现有的值,但我非要改呢? 通过watch监听或者通过$ref标识获取实例后修改以及使用v-modal,使用v-modal会存在不同步情况->使用.sync

1.2.2. props

  (1)props静态传值
  子组件通过props选项来声明一个自定义的属性,然后父组件就可以在嵌套标签的时候,通过这个属性往子组件传递数据 - 引用脚本。
  (2)props动态传值
  通过v-bind绑定props的自定义的属性,传递去过的就不是静态的字符串了,它可以是一个表达式、布尔值、对象等等任何类型的值 - 引用脚本之家

1.2.3. 示例

  (1)propsPage.vue

<template><view><view class="btn-item" @click="clickTap()">按钮</view><view class="slot-item"><!--子组件--><props-son-view :msgValue="msgValue" ><template v-slot:lifeSon><view class="slot-item">子组件</view></template></props-son-view></view></view>
</template>
<script>
import PropsSonView from "./props-son-view.vue";export default {components: {PropsSonView},data() {return {msgValue: "",}},onLoad() {},methods: {clickTap() {this.msgValue = "发送给子组件数据"console.log("clickTap",this.msgValue);}}
}
</script><style scoped>
.btn-item {display: inline-block;background-color: #3cc51f;font-size: 12px;padding: 10px 30px;border-radius: 10px;
}
.slot-item {font-size: 16px;padding: 10px;
}
</style>

  (2)props-son-view.vue

<template><view><view class="slot-item">我是子组件:{{msgValue}}</view><slot name="lifeSon"></slot></view>
</template>
<script>
export default {data() {return {title: 'Hello'}},props: {msgValue: {type: String

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

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

相关文章

4、ubuntu | dify创建知识库 | 上市公司个股研报知识库

1、创建知识库步骤 创建一个知识库并上传相关文档主要涉及以下五个关键步骤&#xff1a; 创建知识库&#xff1a;首先&#xff0c;需要创建一个新的知识库。这可以通过上传本地文件、从在线资源导入数据或者直接创建一个空的知识库来实现。 指定分段模式&#xff1a;接下来是…

Kubernetes中为Elasticsearch配置多节点共享存储

在Kubernetes中为Elasticsearch配置多节点共享存储(ReadWriteMany)需结合存储后端特性及Elasticsearch架构设计。 由于Elasticsearch默认要求每个节点独立存储数据(ReadWriteOnce),直接实现多节点共享存储需特殊处理。 ​​方案一:使用支持ReadWriteMany的存储后端(推荐…

SpringBoot热部署与配置技巧

配置文件SpringBoot 的热部署Spring为开发者提供了一个名为spring-boot-devtools的模块来使SpringBoot应用支持热部署&#xff0c;提高开发者的开发效率&#xff0c;无需手动重启SpringBoot应用相关依赖&#xff1a;<dependency> <groupId>org.springframework.boo…

Python与C#的三元运算符的写法区别

一、语法结构对比​​PyTorch示例​​dev torch.device("cuda:0" if torch.cuda.is_available() else "cpu")​​逻辑​​&#xff1a;若torch.cuda.is_available()为真&#xff0c;则返回"cuda:0"&#xff0c;否则返回"cpu"。​​作…

java 学习篇一

java知识点 一、windows不区分大小写&#xff0c;linux区分大小写 二、写java需要JDK&#xff0c;一般运行环境需要JRE 三、JDK安装一般是傻瓜是安装 四、java主要工具javac、java&#xff1b;其中javac用于编译.java -> .class&#xff1b;java用于执行.class文件执行时候不…

仙盟数据库应用-外贸标签打印系统 前端数据库-V8--毕业论文-—-—仙盟创梦IDE

基于 Excel 标签打印软件的外贸打印流程优化与实践摘要&#xff1a;在全球化外贸业务中&#xff0c;标签打印是货物流通、信息标识的关键环节。本文聚焦 “未来之窗云上打印技术” 的 Excel 标签打印软件&#xff0c;结合外贸平台实际场景&#xff0c;分析其在打印流程中的应用…

【Linux】权限详解 权限本质、权限属性、su、sudo提权、chmod\chown\chgrp、文件类别

文章目录一、权限的认识二、linux的权限本质三、linux的用户su指令sudo提权四、linux角色五、文件权限属性六、修改权限的指令操作chmod指令(权限只会验证一次)chown/chgrp指令修改文件权限的八进制方案七、文件类别详解一、权限的认识 什么是权限&#xff1f; 生活中处处都有权…

rman清理归档

1进入rman rman target / 2&#xff1a;列出所有归档日志的路径 LIST ARCHIVELOG ALL; 3.然后在执行 crosscheck archivelog all;&#xff08;检查 RMAN 存储库中记录的归档日志是否在磁盘或备份存储中实际存在。 4.然后在执行 delete noprompt expired archivelog all;&…

Selenium 处理动态网页与等待机制详解

在使用 Selenium 进行网页自动化操作时&#xff0c;动态网页往往是开发者遇到的第一个 “拦路虎”。想象一下&#xff1a;你明明在代码中写好了元素定位逻辑&#xff0c;运行时却频繁报错 “元素不存在”&#xff0c;但手动打开网页时元素明明就在眼前 —— 这很可能是因为网页…

Salesforce 与外部系统实时集成:基于事件驱动的异步集成架构

在 Salesforce 与外部系统&#xff08;如 ERP、财务系统、物流系统等&#xff09;的实时集成中&#xff0c;“稳定性” 是核心挑战 —— 既要保证数据同步的及时性&#xff0c;又要应对网络波动、系统故障、并发冲突等不可控因素。以下从问题本质、技术瓶颈、解决方案细节三个维…

React 的 `cache()` 函数

文章目录前言一、核心作用二、工作原理三、使用场景1. 避免重复数据请求2. 优化昂贵计算四、缓存规则详解五、与其它缓存方式对比六、服务端特殊行为七、最佳实践八、缓存失效策略九、使用限制十、与数据获取库集成总结&#xff1a;何时使用 cache()前言 React 的 cache() 函数…

大白编译——autotools与cmake

注意: 本文内容于 2025-07-20 01:58:56 创建,可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容,请访问原文地址:大白编译——autotools与cmake。感谢您的关注与支持! 之前记录了通过autotools编译rpm包与deb包的步骤。参考小白编译——rpm包与deb包 - …

react19+nextjs+antd切换主题颜色

在 React 19 Next.js Ant Design 项目中实现主题切换功能&#xff0c;可以通过以下步骤完成。这里将提供完整方案&#xff0c;包含静态主题切换和动态实时切换两种方式。一、基础配置&#xff08;Ant Design 主题支持&#xff09; 1. 安装必要依赖 npm install antd ant-desi…

Modbus Slave 使用教程:快速搭建模拟从站进行测试与开发

文章目录Modbus Slave 使用教程&#xff1a;快速搭建模拟从站进行测试与开发步骤详解&#xff1a;搭建 Modbus Slave1. 安装与启动2. 配置从站连接 (Connection Setup)连接3. 定义从站数据 (设置寄存器/线圈映射)4. 设置初始值与变化模式 (可选但重要)5. 连接 Master 进行测试高…

通俗易懂神经网络:从基础到实现

引言 神经网络是人工智能和深度学习的核心&#xff0c;它模仿人脑的工作方式&#xff0c;通过数据学习复杂的模式。本文将以通俗易懂的方式讲解神经网络的基础知识&#xff0c;包括单层神经网络、多层神经网络&#xff0c;最后用Python代码实现一个简单的神经网络模型。1. 神经…

【Linux】基本指令详解(三) 指令本质、三个查找指令、打包压缩、重要热键、linux体系结构、命令行解释器

文章目录date指令cal指令find指令(指令本质也是文件)which指令file指令whereis指令alias指令grep指令top指令打包和压缩指令zip/unzip指令关于rzsz(linux与windows互传 )tar指令linux机器之间互传bc指令uname指令(查看linux机器体系结构)几个重要的热键[Tab]按键[Ctrl]c按键[Ct…

MSTP 多生成树协议

MSTP 多生成树协议 STP/RSTP 的局限性 所有 vlan 共享一颗生成树无法实现不同 vlan 在多条 Trunk 链路上的分担 二层链路负载均衡STP/RSTP 的局限——次优二层路径**次优二层路径&#xff08;Suboptimal Layer 2 Path&#xff09; 是指&#xff1a; ** 数据帧在交换网络中传输时…

Shell脚本-tee工具

一、前言在 Linux/Unix 系统中&#xff0c;tee 是一个非常实用的命令行工具&#xff0c;它可以帮助我们 同时将命令的输出打印到终端&#xff0c;并写入文件。这种“双路输出”机制在脚本调试、日志记录、自动化任务中非常有用。无论是做日志分析、脚本调试&#xff0c;还是编写…

走进Linux的世界:Linux基本指令(三)

嘿&#xff0c;各位技术潮人&#xff01;好久不见甚是想念。生活就像一场奇妙冒险&#xff0c;而编程就是那把超酷的万能钥匙。此刻&#xff0c;阳光洒在键盘上&#xff0c;灵感在指尖跳跃&#xff0c;让我们抛开一切束缚&#xff0c;给平淡日子加点料&#xff0c;注入满满的pa…

跨域详解与解决方案:从理论到实践的全面指南

目录 1. 跨域是什么?为什么它让人头秃? 为什么跨域问题让人抓狂? 跨域的本质 2. 跨域的罪魁祸首:同源策略与CORS 同源策略的来龙去脉 CORS:跨域的“通行证” 3. JSONP:古老但依然有用的跨域“黑科技” JSONP的原理 JSONP的优缺点 4. 代理服务器:跨域的“中间人…