小程序学习07—— uniapp组件通信props和$emit和插槽语法

embedded/2025/1/8 23:04:43/

目录

一  父组件向子组件传递消息

1.1 props

(a)传递静态或动态的 Prop

(b)单向数据流

二  子组件通知父组件

2.1 $emit

(a)定义自定义事件

(b)绑定自定义事件

三  插槽语法

3.1 Slot

(a)插槽内容与出口

 (b)举例来说


一  父组件向子组件传递消息

1.1 props

props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义验证和设置默认值。

选项类型说明
typeString 、 Number 、 Boolean 、 Array 、 Object 、 Date 、 Function 、 Symbol ,任何自定义构造函数、或上述内容组成的数组会检查一个 prop 是否是给定的类型,否则抛出警告,复杂数据类型需要通过 PropType 标记类型,详见。
defaultany为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
requiredBoolean定义该 prop 是否是必填项。
validatorFunction自定义验证函数会将该 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>

作为一条规则,请记住: 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。


http://www.ppmy.cn/embedded/152405.html

相关文章

MySQL数据结构选择

系列文章目录 一、MySQL数据结构选择 二、MySQL性能优化explain关键字详解 三、MySQL索引优化 文章目录 系列文章目录前言一、索引1.1、什么是索引1.2、构建索引的过程1.3、索引的更新和维护1.4、索引的查询和管理1.5、InnoDB 和 MyISAM 的索引实现1.6、联合索引和最左前缀法则…

【2025软考高级架构师】案例题重点知识——第三部分

33.需求分析总结 需求分析主要是用来分析系统主要做什么,提炼、分析、认真审查获取到的需求,确保所有项目干系人明白其中的含义,同时找出错误、遗漏或者不足的地方。 需求分析的7个方面包括: 1.建立系统边界 2.创建用户界面原型 3.创建数据流图 4.创建数据字典 5.确定…

深入Android架构(从线程到AIDL)_15 应用Android的UI框架02

3、 使用UI线程的MQ(Message Queue) // myView.java // ……… public class myView extends View {// ………Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);// ………// canvas.drawRect(….);invalidate();} } 我们可以透过Message方式来触发UI线程…

PingCAP 连续两年入选 Gartner 云数据库管理系统魔力象限“荣誉提及”

近日&#xff0c;全球 IT 市场研究和咨询公司 Gartner 发布最新报告《Magic Quadrant™ for Cloud Database Management Systems》&#xff08;云数据库管理系统魔力象限&#xff09;&#xff0c;PingCAP 因其企业级开源分布式数据库 TiDB 在全球市场的表现&#xff0c;连续两年…

如何在 Spring Cloud Gateway 中创建全局过滤器、局部过滤器和自定义条件过滤器

Spring Cloud Gateway 是一个功能强大的 API 网关&#xff0c;能够处理 HTTP 请求、响应及路由。通过过滤器机制&#xff0c;您可以在请求和响应过程中进行各种处理操作&#xff0c;如记录日志、身份验证、限流等。Spring Cloud Gateway 提供了三种主要类型的过滤器&#xff1a…

AI赋能跨境电商:魔珐科技3D数字人破解出海痛点

跨境出海进入狂飙时代&#xff0c;AI应用正在深度渗透并重塑着跨境电商产业链的每一个环节&#xff0c;迎来了发展的高光时刻。生成式AI时代的大幕拉开&#xff0c;AI工具快速迭代&#xff0c;为跨境电商行业的突破与飞跃带来了无限可能性。 由于跨境电商业务自身特性鲜明&…

ElasticSearch7.8下载、安装教程和快照恢复

一、Windows安装ElasticSearch7.8 下载地址:ElasticSearch 7.8下载地址 &#xff0c;点击进入下载界面后根据自身的操作系统选择对应的版本进行下载即可 下载完成后可以将压缩包elasticsearch-7.8.0-windows-x86_64.zip进行解压&#xff0c;进入解压文件后可以看到以下文件布局…

30天开发操作系统 第 12 天 -- 定时器

前言 定时器(Timer)对于操作系统非常重要。它在原理上却很简单&#xff0c;只是每隔一段时间(比如0.01秒)就发送一个中断信号给CPU。幸亏有了定时器&#xff0c;CPU才不用辛苦地去计量时间。……如果没有定时器会怎么样呢?让我们想象一下吧。 假如CPU看不到定时器而仍想计量时…