小程序学习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>

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

相关推荐
前端大白话几秒前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时几秒前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳几秒前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹3 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子3 分钟前
深入解析 iframe
前端
WEI_Gaot3 分钟前
ES6 模板字符串
前端·javascript
前端大白话3 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话3 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
长欢3 分钟前
保持元素宽高比
javascript
前端大白话5 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构