了解 Vue 工程化开发中的组件通信

目录

1. 组件通信语法

1.1. 什么是组件通信?

1.2. 为什么要使用组件通信?

1.3. 组件之间有哪些关系(组件关系分类)?

1.4. 组件通信方案有哪几类 ?

2. 父子通信流程图

3. 父传子

3.1. 父传子核心流程props

4. 子传父

4.1. 子传父核心流程$emit

5. prop 介绍

5.1. prop 定义

5.2. prop 作用

5.3. prop 特点

5.4. prop 练习

6. props 校验

6.1. 问题引入(思考)

6.2. props 校验的作用

6.3. props 校验的语法

7. prop 与 data,单向数据流

7.1. prop 与 data的共同点

7.2. prop 与 data的区别

7.3. 单向数据流介绍

7.4. 口诀

8. 非父子 (拓展)-event bus 事件总线

8.1. event bus 事件总线的作用

8.2. event bus 事件总线的步骤

9. 非父子 (拓展)-provide 与 inject

9.1. provide 与 inject 的作用

9.2. provide 与 inject 的步骤


 

1. 组件通信语法

1.1. 什么是组件通信?

  • 组件通信, 就是指 组件与组件 之间的数据传递

1.2. 为什么要使用组件通信?

  • 组件的数据是独立的,无法直接访问其他组件的数据
  • 想用其他组件的数据,就需要组件通信

1.3. 组件之间有哪些关系(组件关系分类)?

  • 父子关系
  • 非父子关系

1.4. 组件通信方案有哪几类 ?

 

2. 父子通信流程图

  • 父组件通过 props 将数据传递给子组件
  • 子组件利用 $emit 通知父组件修改更新

3. 父传子

父组件通过 props 将数据传递给子组件

3.1. 父传子核心流程props

  • 父组件中给子组件添加属性传值
  • 子组件props 接收
  • 子组件使用

 

4. 子传父

子组件利用 $emit 通知父组件,进行修改更新

4.1. 子传父核心流程$emit

  • 子组件$emit 发送消息
  • 父组件中给子组件添加消息监听
  • 父组件中实现处理函数

 

5. prop 介绍

5.1. prop 定义

  • 组件上 注册的一些 自定义属性

5.2. prop 作用

  • 向子组件传递数据

5.3. prop 特点

  • 可以 传递 任意数量 的prop
  • 可以 传递 任意类型 的prop

5.4. prop 练习

 

6. props 校验

6.1. 问题引入(思考)

  • 组件的 prop 可以乱传吗?

6.2. props 校验的作用

  • 为组件的 prop 指定验证要求,不符合要求,控制台就会有错误提示

目的:帮助开发者,快速发现错误

6.3. props 校验的语法

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

类型校验的语法

Props 校验的完整语法

 

7. prop 与 data,单向数据流

7.1. prop 与 data的共同点

  • 都可以给组件提供数据

7.2. prop 与 data的区别

  • data 的数据是自己的,可以随便改
  • prop 的数据是外部的,不能直接改,要遵循 单向数据流

7.3. 单向数据流介绍

  • 父级 prop 的数据更新,会向下流动,影响子组件

这个数据流动是单向的

7.4. 口诀

  • 谁的数据谁负责

 

8. 非父子 (拓展)-event bus 事件总线

8.1. event bus 事件总线的作用

  • 非父子组件之间,进行简易消息传递

复杂场景 → Vuex

8.2. event bus 事件总线的步骤

  • 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js

  • A 组件(接收方),监听 Bus 实例的事件

  • B 组件(发送方),触发 Bus 实例的事件

 

9. 非父子 (拓展)-provide 与 inject

9.1. provide 与 inject 的作用

  • 跨层级共享数据

9.2. provide 与 inject 的步骤

  • 父组件 provide 提供数据

  • 子/孙组件 inject 取值使用

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

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

相关文章

力扣练习题(2024/4/14)

1接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。 示例 1: 输入:height [0,1,0,2,1,0,1,3,2,1,2,1] 输出:6 解释:上面是由数组 [0,1,0,2,1,0,1,3,2…

SpringBoot 整合RocketMQ

目录 一、引入依赖 二、配置文件 三、生产者 四、消费者 五、结果 一、引入依赖 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.2.0</version> </d…

leetcode热题100.爬楼梯(从二进制到快速幂)

Problem: 70. 爬楼梯 文章目录 题目思路Code复杂度 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方…

numpy学习笔记(5),其他实用函数

8. 更多函数 8.1 随机数 8.1.1 常用随机数 8.1.1.1 numpy.random.rand(d0, d1, …, dn) 返回[0.0, 1.0)随机浮点数&#xff0c;即大于等于0.0&#xff0c;小于1.0。d0, d1, …, dn&#xff1a;返回的数组形状 # 使用numpy.random.rand函数 import numpy as np np.random.r…

每日一题:无重复字符的最长子串

给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串的长度。 示例 1: 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是"abc"&#xff0c;所以其长度为 3。示例 2: 输入: s "bbbbb" 输出: 1 解释: 因为无重…

2009-2021年上市公司僵尸企业识别数据(含原始数据+计算代码+计算结果)

2009-2021年上市公司僵尸企业识别数据&#xff08;含原始数据计算代码计算结果&#xff09; 1、时间&#xff1a;2009-2021年 2、指标&#xff1a; 证券代码 、证券简称、上市日期、year、净利润、政府补助、流动负债合计、负债合计、财务费用明细利息支出、资产总计、长期负…

SpringBoot中的常见注解详细介绍,附带代码示例

注意&#xff1a;本文不仅含有SpringBoot中常见的注解&#xff0c;还有其它框架的注解。因为注解之间会相互配合使用&#xff0c;所以每一个注解的示例与其他的注解都会有部分相似&#xff0c;请选择查看。 文章目录 01、SpringBootApplication02、Configuration03、EnableAuto…

算法设计中的一些核心原则

1.命名并实体化一切非自解释的概念 这是算法设计的核心原则之一。可以进一步归结为&#xff1a;你不可让逻辑匿名地裸露出来。你必须命名一切你知晓的概念&#xff0c;并且通过注释、适当的代码粒度管理&#xff0c;命名&#xff0c;妥善封装这些概念&#xff0c;比如&#xf…

(Oracle)SQL优化案例:隐式转换优化

项目场景 项目现场的某个kettle模型执行非常缓慢&#xff0c;原因在于某个SQL执行效率非常的低。甲方得知此事要求公司赶紧优化&#xff0c;负责该模块的同事对SQL优化并不熟悉。所以作为一个立志成为优秀DBA的ETL工程师&#xff0c;我自告奋勇&#xff1a;不是DBA&#xff0c;…

ES6 关于Class类的继承 extends(2024-04-10)

1、简介 类Class 可以通过extends关键字实现继承&#xff0c;让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承&#xff0c;要清晰和方便很多。 class Foo {constructor(x, y) {this.x x;this.y y;console.log(父类构造函数)}toString() {return ( this.x …

《由浅入深学习SAP财务》:第2章 总账模块 - 2.7 总账模块报表 -2.7.1 对外报表:资产负债表及利润表

总账模块报表既包括对外报告的资产负债表、损益表、现金流量表&#xff0c;也包括企业自身用于查询和分析的各类报表&#xff0c;如科目余额表等。 2.7.1 对外报表&#xff1a;资产负债表及利润表 在SAP中&#xff0c;出具资产负债表和利润表的标准方法是先在后台建立一套“会…

971: 统计利用先序遍历创建的二叉树的深度

解法&#xff1a; 1.先序遍历创建二叉树链表形式 2.求二叉树的深度 用后序遍历实现&#xff1a; 1.后序遍历求节点A左右子树高度 2.对节点A&#xff1a; 1.取左右子树较大高度 2.返回高度1&#xff08;即以节点A为根节点的子树的最大深度&#xff09; 例如 #include <ios…

LINUX命令行后台运行matlab程序

UBUNTU安装了matlab&#xff0c;需要后台运行matlab程序。 一、MobaXterm程序&#xff08;非后台&#xff09; 使用mobaxterm程序&#xff0c;ssh连接ubuntu&#xff0c;在对应账号中输入matlab&#xff0c;即可基于mobaxterm自带的Xserver可视化界面&#xff0c;打开matlab界…

多多采集器使用指南 拼多多商家爬虫工具介绍

多多采集器是一款功能强大的数据采集工具&#xff0c;特别适用于拼多多商家爬虫任务。它可以帮助用户快速、高效地采集拼多多商家的信息&#xff0c;并提供了丰富的数据处理和导出功能。本文将介绍多多采集器的基本使用方法&#xff0c;并附带示例代码来演示如何使用多多采集器…

RobotFramework功能自动化测试框架基础篇

概念 RobotFramework是什么&#xff1f; Robot Framework是一款python编写的功能自动化测试框架。具备良好的可扩展性&#xff0c;支持关键字驱动&#xff0c;可以同时测试多种类型的客户端或者接口&#xff0c;可以进行分布式测试执行。主要用于轮次很多的验收测试和验收测试…

网页的基本结构

VScode中HTML的自动补全&#xff1a; 自动补全&#xff1a;例如标签 <h1></h1> 1.输入<h1>后其会自动给其补全 2. 进输入h1 tab键 网页的基本结构&#xff1a; 网页的基本结构只需要在VScode当中输入&#xff1a;&#xff01; tab键即可 <!DOCTYPE html…

ARM v8 Cortex R52内核 08 内存保护单元 Memory Protection Unit

ARM v8 Cortex R52内核 08 内存保护单元 Memory Protection Unit 8.1 About the MPU Cortex R52 处理器具有两个可编程的MPU&#xff0c;由EL1和EL2控制。每个MPU允许将4GB内存地址划分为多个区域。 每个内存区域由基地址、限制地址、访问权限和内存属性定义。 对于数据访问…

阿里对象储存OSS的SDK使用

对象存储OSS 该功能的实现使用了阿里的&#xff1a;对象存储OSS技术。 在阿里对象存储空间的文件可以 以链接 的形式进行访问: 文件访问路径规则 &#xff1a;https://BucketName.Endpoint/ObjectName 该技术的使用方式有很多&#xff0c;针对于SDK的简单实现官网上也有教程…

go 利用channel控制并发

任务数量为50&#xff0c;并发在5&#xff0c;全部都要执行 package mainimport ("fmt""time" )type Con struct {num inttime string }func main() {//channel实现并发控制// 定义同时执行的任务数量concurrencyLevel : 5//总任务数totalTask : 50// 创…

【网络编程】高性能并发服务器源码剖析

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的网络编程系列之洪水网络攻击&#xff0c;在这篇文章中&#xff0c;你将会学习到在网络编程中如何搭建一个高性能的并发服务器&#xff0c;并且我会给出源码进行剖析&#xff0c;以及手绘UML图来帮助大家来理解&#xf…