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

目录

[一 父组件向子组件传递消息](#一 父组件向子组件传递消息)

[1.1 props](#1.1 props)

[(a)传递静态或动态的 Prop](#(a)传递静态或动态的 Prop)

(b)单向数据流

[二 子组件通知父组件](#二 子组件通知父组件)

[2.1 emit](#2.1 emit)

(a)定义自定义事件

(b)绑定自定义事件

[三 插槽语法](#三 插槽语法)

[3.1 Slot](#3.1 Slot)

(a)插槽内容与出口

(b)举例来说


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

1.1 props

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

选项 类型 说明
type StringNumberBooleanArrayObjectDateFunctionSymbol ,任何自定义构造函数、或上述内容组成的数组 会检查一个 prop 是否是给定的类型,否则抛出警告,复杂数据类型需要通过 PropType 标记类型,详见
default any 为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required Boolean 定义该 prop 是否是必填项。
validator Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 false 的值 (也就是验证失败),一个控制台警告将会被抛出。

示例:

html 复制代码
	<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>
html 复制代码
	<template>
		<view>
			<!-- 我是父组件 -->
			<componentA :age="10"></componentA>
		</view>
	</template>

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

  • 可以像这样给 `prop` 传入一个静态的值:
html 复制代码
<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> 组件,可以像这样使用:

html 复制代码
<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>

<FancyButton> 的模板是这样的:

html 复制代码
<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

组件最终渲染出的 DOM 是这样:

html 复制代码
<button class="fancy-btn">
  Click me!
</button>

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

相关推荐
旧味清欢|3 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾20 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin31 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox44 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员