小程序学习07—— uniapp组件通信props和$emit和插槽语法
目录
一 父组件向子组件传递消息
1.1 props
（a）传递静态或动态的 Prop
（b）单向数据流
二 子组件通知父组件
2.1 $emit
（a）定义自定义事件
（b）绑定自定义事件
三 插槽语法
3.1 Slot
（a）插槽内容与出口
（b）举例来说
一 父组件向子组件传递消息
1.1 props
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。
| 选项 | 类型 | 说明 |
|---|---|---|
| type | String 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、 Symbol ，任何自定义构造函数、或上述内容组成的数组 | 会检查一个 prop 是否是给定的类型，否则抛出警告，复杂数据类型需要通过 PropType 标记类型，详见。 |
| default | any | 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。 |
| required | Boolean | 定义该 prop 是否是必填项。 |
| validator | Function | 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 false 的值 (也就是验证失败)，一个控制台警告将会被抛出。 |
示例：
<template><view><!-- 我是子组件componentA --><view>{{age}}</view></view></template><script>export default {props: {// 检测类型 + 其他验证age: {type: Number,default: 0,required: true,validator: function(value) {return value >= 0}}}}</script>
<template><view><!-- 我是父组件 --><componentA :age="10"></componentA></view></template>
（a）传递静态或动态的 Prop
- 可以像这样给 `prop` 传入一个静态的值：
<navbar name="navbar组件" />
-
可以通过
v-bind或简写 : 动态赋值，例如：
- 在使用
<script setup>的单文件组件中，props 可以使用defineProps()宏来声明，还可以使用对象的形式：
（b）单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
二 子组件通知父组件
2.1 $emit
（a）定义自定义事件
父组件可以通过 v-on (缩写为 @) 来监听事件
（b）绑定自定义事件
直接使用 `$emit` 方法触发自定义事件。当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。
三 插槽语法
3.1 Slot
（a）插槽内容与出口
<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
（b）举例来说
这里有一个 <FancyButton> 组件，可以像这样使用：
<FancyButton>Click me! <!-- 插槽内容 -->
</FancyButton>而 <FancyButton> 的模板是这样的：
<button class="fancy-btn"><slot></slot> <!-- 插槽出口 -->
</button>组件最终渲染出的 DOM 是这样：
<button class="fancy-btn">Click me!
</button>作为一条规则，请记住： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
相关文章：
小程序学习07—— uniapp组件通信props和$emit和插槽语法
目录 一 父组件向子组件传递消息 1.1 props （a）传递静态或动态的 Prop （b）单向数据流 二 子组件通知父组件 2.1 $emit （a）定义自定义事件 （b）绑定自定义事件 三 插槽语法…...
行为模式1.模板方法模式
行为型模式 模板方法模式（Template Method Pattern）命令模式（Command Pattern）迭代器模式（Iterator Pattern）观察者模式（Observer Pattern）中介者模式（Mediator Pattern…...
【模型】Qwen2-VL 服务端UI
1. 前言 最近在测试VLM模型，发现官方的网页demo，代码中视频与图片分辨率可能由于高并发设置的很小，导致达不到预期效果，于是自己研究了一下，搞了一个简单的前端部署，自己在服务器部署了下UI界面࿰…...
ImageNet 2.0？自动驾驶数据集迎来自动标注新时代
引言： 3DGS因其渲染速度快和高质量的新视角合成而备受关注。一些研究人员尝试将3DGS应用于驾驶场景的重建。然而，这些方法通常依赖于多种数据类型，如深度图、3D框和移动物体的轨迹。此外，合成图像缺乏标注也限制了其在下游任务中的…...
京东一面：MySQL 主备延迟有哪些坑？主备切换策略
作为一名开发同学，大家对 MySQL 一定不陌生，像常见的 事务特性、隔离级别 、索引等也都是老生常谈。 今天，我们就来聊个深度话题，关于 MySQL 的 高可用 一、什么是高可用？ 维基百科定义： 高可用性&#x…...
安装Eigen3库)
Linux(Ubuntu24.04)安装Eigen3库
本次安装Eigen3是在WSL2的Ubuntu24.04环境下进行。 Eigen3是一个C模板库，用于线性代数、矩阵运算和数值计算。它提供了一组高性能的矩阵和向量操作，以及常用的线性代数算法，如矩阵分解、特征值求解和最小二乘解等。 1、安装Eigen3 有两种安…...
ABP框架8——仓储的作用及其基础Demo
一、使用仓储的好处 1.提高CRUD接口复用性2.解耦业务逻辑（BLL）和增删改查（CRUD），换ORM特别方便，不需要改应用层，直接改仓储层3.做复杂查询4.事务支持 二、Demo public class BookRepository …...
【Multisim用74ls92和90做六十进制】2022-6-12
缘由Multisim如何用74ls92和90做六十进制-其他-CSDN问答 74LS92、74LS90参考...
利用KPaaS平台提升企业审批流程的透明度
企业的审批流程不仅影响决策效率，还直接关联到组织的透明度和运营效果。传统的审批流程通常由多个环节和系统构成，每一个环节都可能存在信息不对称的现象。例如，某一审批节点的负责人可能并不清楚当前的审批状态，而在其他环节&…...
Python 数据可视化的完整指南
目录 一、为什么选择 Python 进行数据可视化？ 二、常用 Python 可视化库及其特点 三、常用图表类型及其代码示例 折线图：用于展示数据随时间或其他连续变量的变化趋势。 柱状图：用于比较不同类别的数据大小。 散点图：用于展示两个变量之间的关系，并发现数据中的模式…...
ZYNQ初识7（zynq_7010）RAM_IP核
学习汇总正点原子bi站教学视频。但由于目前的学习板PL端缺乏时钟晶振，所以需要从PS端调用时钟供给PL端使用，也就造成顶层文件的设置出现一些问题，在IP核创建调用和例化过程中一些功能会受到限制，所以以下仅作汇总参考。 zynq_7000…...
.e01, ..., .e0n的分卷压缩包怎么解压
用BandiZip，这些分卷压缩中还有一个.exe的文件，这个不是可执行文件，是一个解压缩的开头。 安装好bandiZip后，右键这个.exe文件 点击打开就是开始解压了： 最后解压后是这些。然后一个个再次解压....
linux网络管理
网络配置文件 网卡信息文件 :::color3 /etc/sysconfig/network-scripts ::: 配置描述DEVICE网卡设备名-必填BOOTPROTO必填：none,static(静态 IP),dhcp(动态 IP)HWADDRMAC 地址NM_CONTROLLED是否启用Network Manager图形管理工具，建议 noONBOOT是否默认…...
宽带、光猫、路由器、WiFi、光纤之间的关系
1、宽带（Broadband） 1.1 宽带的定义宽带指的是一种高速互联网接入技术，通常包括ADSL、光纤、4G/5G等不同类型的接入方式。宽带的关键特点是能够提供较高的数据传输速率，使得用户可以享受到稳定的上网体验。 1.2 宽带的作用宽带是…...
Momentum Contrast for Unsupervised Visual Representation Learning论文笔记
文章目录 论文地址动量队列对比学习的infoNCE loss为什么需要动量编码器对比学习moco方法中的动量Encoder为什么不能与梯度Encoder完全相同为什么动量编码器和梯度编码器不能完全相同？总结： 我理解，正负样本应该经过同一个encoder，…...
linux-26 文件管理(四）install
说一个命令，叫install，man install，install是什么意思？安装，install表示安装的意思，那你猜install是用来干什么的？猜一猜干什么的？安装软件，安装第三方软件，错…...
day-104 组合总和 Ⅳ
思路 动态规划 解题过程 假设dfs(target)表示组成target的组合数，可得转换方程dfs(target)dfs(target-nums[0])dfs(target-nums[1])…以此类推 注意：nums[i]需要小于等于当前的target Code class Solution {public int combinationSum4(int[] nums, i…...
Gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置
gitlab-runner 修改默认的builds_dir并使用custom_build_dir配置 1. 说明2. 实操（以docker执行器为例）2.1 修改默认的builds_dir2.1.1 调整gitlab-runner的配置文件2.1.2 CI文件 2.2 启用custom_build_dir2.2.1 调整gitlab-runner的配置文件2.2.2 CI文件…...
代码随想录算法训练营day21
代码随想录算法训练营 —day21 文章目录 代码随想录算法训练营前言一、669. 修剪二叉搜索树递归法迭代法 二、108.将有序数组转换为二叉搜索树递归法迭代法 三、538.把二叉搜索树转换为累加树递归法 总结 前言 今天是算法营的第21天，希望自己能够坚持下来…...
苹果系统MacOS下ObjectC建立的App程序访问opencv加载图片程序
前言 苹果系统下使用opencv感觉还是有些不太方便，总是感觉有点受到限制。本博客描述的是在MacOS下建立App程序然后调用opencv显示图片时出现的一些问题并最后解决的一个过程。 一、程序的建立 选择程序的类型： 选择界面模式和编程语言： 其余…...
滴滴工作流引擎Turbo与logicFlow研究
目录 logicFlow turbo 工作流引擎很多，也都提供了前端UI库，但是太过于冗杂了，元数据表都几十个，logincFlow和Turbo的组合提供了轻量化方式，turbo后端代码只有5个元数据表，logicFlow也提供了bpm的相关扩展功能，但缺点是turbo社区不活跃，logicFlow个人认为跟echarts这种…...
快速将索尼手机联系人导出为 HTML 文件
我想将 Sony Xperia 手机上的联系人导出到计算机上进行备份，并在需要时进行编辑。这可以做到吗？如何做到？作为助手我需要下载什么工具吗？ 当您的 Android 手机上存储了如此多的重要联系人，而您又不想丢失它们时&#…...
长时间序列预测算法---Informer
目录 一、传统的 Transformer 模型二、Informer原理2.1 Attention计算2.2 “积极”的Q筛选2.2.1 KL散度2.2.2 “懒惰”的q处理 2.3 Encoder结构2.4 Decoder结构2.4.1 Transformer的Decoder操作2.4.2 Informer的Decoder操作 2.5 Informer模型的改进 三、模型应用 时间序列相关参…...
深入理解连接池：从数据库到HTTP的优化之道
在现代应用开发中，高效的资源管理是关键，其中连接池（Connection Pool）技术起到了至关重要的作用。本文将带你深入了解连接池的概念及其在数据库和HTTP通信中的应用，结合 JDBC 与 Druid 的关系，以及 HttpURL…...
LLM（十二）| DeepSeek-V3 技术报告深度解读——开源模型的巅峰之作
近年来，大型语言模型（LLMs）的发展突飞猛进，逐步缩小了与通用人工智能（AGI）的差距。DeepSeek-AI 团队最新发布的 DeepSeek-V3，作为一款强大的混合专家模型（Mixture-of-Experts, MoE&a…...
IIS设置IP+端口号外网无法访问的解决方案
在IIS将站点设置为IP端口访问，假设端口为8080，设好后，服务器上可以访问，外网无法访问。 通常是端口8080没有加入【入站规则】的缘故，将8080端口加入【入站规则】即可，操作如下： 一、ctrlr 输入 …...
Leetcode 最大正方形
java 实现 class Solution {public int maximalSquare(char[][] matrix) {//处理特殊情况if(matrix null || matrix.length 0 || matrix[0].length 0) return 0;int rows matrix.length;int cols matrix[0].length;int[][] dp new int[rows][cols]; //dp[i][j]的含义是以…...
)
数据结构与算法之动态规划: LeetCode 3105. 最长的严格递增或递减子数组 (Ts版)
最长的严格递增或递减子数组 https://leetcode.cn/problems/longest-strictly-increasing-or-strictly-decreasing-subarray/description/ 描述 给你一个整数数组 nums返回数组 nums 中 严格递增 或 严格递减的最长非空子数组的长度 示例 1 输入：nums [1,4,3,…...
【书籍连载】《软件测试架构实践与精准测试》| 有关软件测试模型的调查结果
各位软件领域的精英们，今天小编邀请你继续深入学习《软件测试架构实践与精准测试》。 《软件测试架构实践与精准测试》是作者李龙（安畅检测首席技术专家）基于软件测试“川模型”的著作。本书结合作者首次提出的软件测试新的模型“川模型”测试…...
我的博客年度之旅：感恩、成长与展望
目录 感恩有你 技能满点 新年新征程 嘿，各位技术大佬、数码潮咖还有屏幕前超爱学习的小伙伴们！当新年的钟声即将敲响，我们站在时光的交汇点上，回首过往，满心感慨；展望未来，豪情满怀。过去的这…...
【RTD MCAL 篇3】 K312 MCU时钟系统配置
【RTD MCAL 篇3】 K312 MCU时钟系统配置 一，文档简介二， 时钟系统理论与配置2.1 K312 时钟系统2.1.1 PLL2.1.2 MUX_0系统2.1.3 MUX_6 时钟输出2.1.4 option B推荐方案 2.2 EB 配置2.2.1 General 配置2.2.2 McuClockSettingConfig配置2.2.2.1 McuFIRC配置…...
力扣28找出字符串中第一个匹配项的下标
class Solution:def strStr(self, haystack: str, needle: str) -> int:# 特殊情况处理if not needle:return 0# 获取 haystack 和 needle 的长度a len(needle)b len(haystack)# 遍历 haystack，检查每个子字符串是否与 needle 匹配for i in range(b - a 1):if…...
包含0和1吗)
[C#]C# random.Next(0,1)包含0和1吗
在C#中，Random.Next(minValue, maxValue) 方法生成的随机数是一个在 minValue（包含）和 maxValue（不包含）之间的整数。因此，当你调用 Random.Next(0, 1) 时，它只会生成一个整数，这个整…...
【设计模式】 基本原则、设计模式分类
设计模式 设计模式是软件工程中的一种通用术语，指的是针对特定问题的经过实践验证的解决方案。设计模式并不是最终的代码实现，而是描述了如何解决某一类问题的思路和方法。 如果熟悉了设计模式，当遇到类似的场景，我们可以快速地…...
Swift White Hawkstrider
Swift White Hawkstrider 迅捷白色陆行鸟 Swift White Hawkstrider - Item - 魔兽世界怀旧服TBC数据库_WOW2.43数据库_70级《燃烧的远征》数据库 Kaelthas Sunstrider (1) <Lord of the Blood Elves> 凯尔萨斯逐日者. 掉落 [80圣骑士][Alonsus-加丁][诺森德冒险补给品…...
node.js下载、安装、设置国内镜像源（永久）（Windows11）
目录 node-v20.18.0-x64 工具下载安装设置国内镜像源（永久） node-v20.18.0-x64 工具 系统：Windows 11 下载 官网https://nodejs.org/zh-cn/download/package-manager 版本我是跟着老师选的node-v20.18.0-x64如图选择 Windows、x64、v2…...
「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现
本篇教程将带你实现一个简易购物车功能。通过使用接口定义商品结构，我们将创建一个动态购物车，支持商品的添加、移除以及实时总价计算。 关键词 UI互动应用接口定义购物车功能动态计算商品管理列表操作 一、功能说明 简易购物车功能包含以下交互&#…...
).sum())
df.groupby(pd.Grouper(level=1)).sum()
df.groupby(pd.Grouper(level1)).sum() 在 Python 中的作用是根据 DataFrame 的某一索引级别进行分组，并计算每个分组的总和。具体来说： df.groupby(...)：这是 pandas 的分组操作，按照指定的规则将 DataFrame 分组。 pd.Grouper(…...
【网络安全 | 漏洞挖掘】绕过电子邮件确认实现预账户接管
未经许可，不得转载。 文章目录 正文漏洞步骤赏金正文 我测试的应用程序有多个子域名： 1、account.example.com：处理用户账户管理。 2、project.example.com：管理用户拥有或被邀请的项目。 3、org.example.com：一个新的子域，用于管理多个项目的组织。 4、collaborator.ex…...
【SpringBoot教程】SpringBoot整合Mybatis - 前后端分离项目 - vue3
🙋大家好！我是毛毛张! 🌈个人首页： 神马都会亿点点的毛毛张 今天毛毛张将通过一个完整的前后端分离的任务来介绍SpringBoot整合Mybatis过程！ 文章目录 1.前言1.1 任务描述1.2 SpringBoot整合Mybatis概述1.3 完整项目…...
node.js之---事件驱动编程
详解事件驱动 事件驱动是基于什么实现的 事件驱动和I/O操作的关系 I/O操作和事件循环的关系 详解事件驱动 事件驱动编程（Event-driven Programming）是一种编程范式，其中程序的控制流是由“事件”驱动的。事件通常指的是用户操作、网络请…...
RK3588+FPGA全国产异步LED显示屏控制卡/屏幕拼接解决方案
RK3588FPGA核心板采用Rockchip RK3588新一代旗舰 级八核64位处理器，支持8K视频编解码，多屏4K输出，可实现12屏联屏拼接、同显、异显，适配多种操作系统，广泛适用于展览展示、广告内容投放、新零售、商超等领域实现各种媒…...
Postman测试big-event
报错500。看弹幕，知道可能是yml或sql有问题。 所以检查idea工作台， 直接找UserMapper检查，发现完全OK。 顺着这个error发现可能是sql有问题。因为提示是sql问题，而且是有now()的那个sql。 之后通过给的课件，复制课件…...
38. 考古学家
题目描述 有一个考古学家发现一个石碑，但是很可惜，发现时其已经断成多段，原地发现n个断口整齐的石碑碎片。为了破解石碑内容，考古学家希望有程序能帮忙计算复原后的石碑文字组合数，你能帮忙吗？ 输入描述 第…...
商用车自动驾驶，迎来大规模量产「临界点」？
商用车自动驾驶，正迎来新的行业拐点。 今年初，交通部公开发布AEB系统运营车辆标配征求意见稿，首次将法规限制条件全面放开，有望推动商用车AEB全面标配，为开放场景的商用车智能驾驶市场加了一把火。 另外，…...
中建海龙：科技助力福城南产业片区绿色建筑发展
在快速发展的城市化进程中，绿色建筑以其环保、节能、可持续的特点日益受到重视。作为建筑工业化领域的领军企业，中建海龙科技有限公司（简称“中建海龙”）凭借其卓越的科技实力和创新举措，在推动绿色建筑发展方面做出了…...
selenium-side-runner + edge快速使用
安装和配置 Node.js 与 Selenium-Side-Runner 1. 安装 Node.js 为了使用 selenium-side-runner，首先需要在你的系统上安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它允许开发者编写服务器端代码。 通过 Winget 安装 Node.js（适用于 Windows 10/…...
ARM发布Armv9.5架构：迈向更强性能与灵活性的新时代
2024年11月30日，ARM正式发布了其最新的Armv9.5架构，这是Arm技术发展的又一重要里程碑。从表中信息来看，Armv9.5架构的发布标志着该公司的架构系列在性能、灵活性和可扩展性方面取得了进一步突破。本次发布不仅是技术上的提升，更是…...
Pytorch的自动求导模块
文章目录 torch.autograd.backward()基本用法非标量张量的反向传播保留计算图指定输入张量高阶梯度计算 与 y.backward() 的区别torch.autograd.grad()基本用法非标量张量的梯度高阶梯度计算多输入、多输出的梯度计算未使用的输入张量保留计算图 与 backward() 的区别 torch.au…...
【React】- 跨域PDF预览、下载（改文件名）、打印
我们经常会碰到跨域来方位PDF，同时需要下载、打印的需求，通常由于浏览器的安全策略，可以预览，但是下载和打印可能会受限，这时候怎么办呢？ 1.创建一个隐藏的标签 要下载 iframe 中的 PDF 文件，…...