vue组件通信

1. 概述

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

注:组件的数据是独立的,无法直接访问其他组件的数据。所以需要了解组件通信

口诀:谁的数据谁处理

2. 组件关系

不同的组件关系包括:

  • 父子关系(包含)
  • 非父子关系 (不包含,没有关联 )

图示:
在这里插入图片描述

3. 父子组件通信

3.1 props (父传子)

步骤图:
在这里插入图片描述

props的多种写法:

  • 简单格式:
props: ['title','属性名'] // 没有类型校验
  • 简单类型校验格式:
props: {title: String,// 校验类型校验的属性名: 类型 
},
  • 完整写法:
props: {校验的属性名: {type: 类型, // 校验类型required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},

3.2 $emit (子传父)

因为组件的数据是独立的,谁的数据谁处理,这里只是通知父组件,进行修改,真正的修改还是需要父组件自己完成,详见下面步骤图:

步骤图:
在这里插入图片描述

4. 非父子组件通信

4.1 event bus 事件总线 实现(了解即可)

作用:非父子组件之间,进行简易消息传递。 复制场景:使用Vuex

实现步骤:

  1. 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js
import Vue from 'vue'
const Bus = new Vue()
export default Bus
  1. A 组件(接收方),监听 Bus 实例的事件
created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
}
  1. B 组件(发送方),触发 Bus 实例的事件
Bus.$emit('sendMsg', '这是一个消息') // '这是一个消息' 对应上面的 msg 形参
  1. 图示:
    在这里插入图片描述

注意:上面的函数:sendMsg一定需要保存一致

4.2 provide & inject 非直接父类(祖/孙)

provide & inject 作用:跨层级共享数据

步骤:

  1. 父组件 provide 提供数据
export default {provide () {return {// 普通类型【非响应式】color: this.color,// 复杂类型【响应式】userInfo: this.userInfo,}}
}
  1. 子/孙组件 inject 取值使用
export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

5. v-model 实现组件数据双向绑定

5.1 原理

v-model本质上是一个语法糖。例如应用在输入框上,就是 value属性 和 input事件 的合写。

5.2 使用步骤:

父组件创建传递:selectId 是父组件的一个属性值

<BaseSelect v-model="selectId"></BaseSelect>
props: {value: String // 使用value接收
},

子组件修改,通知父组件

methods: {handleChange (e) {this.$emit('input', e.target.value) // 使用input}
}

具体参考:黑马程序员教学视频-57集

6. .sync 实现组件数据双向绑定

6.1 介绍:

实现指定属性名进行组件数据的双向绑定

6.2 使用步骤:

父组件创建传递:selectId 是父组件的一个属性值

<BaseDialog :visibleSelf.sync="isShow" />

子组件接收:

props: {visibleSelf: Boolean
},

子组件修改,通知父组件

this.$emit('update:visibleSelf', false)

具体参考:黑马程序员教学视频-58集

7. Vuex - 待续

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

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

相关文章

启英泰伦推出「离线自然说」,离线语音交互随意说,不需记忆词条

离线语音识别是指不需要依赖网络&#xff0c;在本地设备实现语音识别的过程&#xff0c;通常以端侧AI语音芯片作为载体来进行数据的采集、计算和决策。但是语音芯片的存储空间有限&#xff0c;通过传统的语音算法技术&#xff0c;最多也只能存储数百条词条&#xff0c;导致用户…

SOLID 原则

单一功能原则 单一功能原则&#xff08;Single responsibility principle&#xff09;规定每个类都应该有一个单一的功能&#xff0c;并且该功能应该由这个类完全封装起来。所有它的&#xff08;这个类的&#xff09;服务都应该严密的和该功能平行&#xff08;功能平行&#x…

杨中科 EFCORE 第四部分 命令详解56-61

Migrations 深入研究Migrations 1、使用迁移脚本&#xff0c;可以对当前连接的数据库执行编号更高的迁移&#xff0c;这个操作叫做“向上迁移” (Up)&#xff0c;也可以执行把数据库回退到旧的迁移&#xff0c;这个操作叫“向下迁移(Down&#xff09; 2、除非有特殊需要&…

在Android原生项目中 创建 Flutter模块

前言 应用场景&#xff1a;在已有的Android原生项目中&#xff0c;引入Flutter模块&#xff0c;摸索了两天&#xff0c;终于给整出来了&#xff1b; 如果是新项目&#xff0c;最好直接创建Flutter项目&#xff0c;然后在Fluter的 android / ios目录中&#xff0c;写原生代码&…

贝锐蒲公英云智慧组网解读:实现工业设备远程调试、异地PLC互联

这个时候&#xff0c;使用异地组网是非常有效的解决方案。在12月28日贝锐官方的直播中&#xff0c;请到了贝锐蒲公英的技术研发经理&#xff0c;为大家分享了贝锐蒲公英云智慧组网解决方案&#xff0c;以及蒲公英二层组网相关的技术和应用。 搜索“贝锐”官方视频号&#xff0c…

好物周刊#36:程序员简历

村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. SmartDNS 一个运行在本地的 DNS 服务器&#xff0c;它接受来自本地客户端的 DNS 查询请求&#xff0c;然后从多个上游 DNS 服务器获取 DNS 查询…

【BetterBench】2024年都有哪些数学建模竞赛和大数据竞赛?

2024年每个月有哪些竞赛&#xff1f; 2024年32个数学建模和数据挖掘竞赛重磅来袭&#xff01;&#xff01;&#xff01; 2024年数学建模和数学挖掘竞赛时间目录汇总 一月 &#xff08;1&#xff09;2024年第二届“华数杯”国际大学生数学建模竞赛 报名时间&#xff1a;即日起…

苍穹外卖学习----出错记录

1.微信开发者工具遇到的问题&#xff1a; 1.1appid消失报错&#xff1a; {errMsg: login:fail 系统错误,错误码:41002,appid missing [20240112 16:44:02][undefined]} 1.2解决方式&#xff1a; appid可在微信开发者官网 登录账号后在开发栏 找到 复制后按以下步骤粘贴即…

【MySQL】子查询

文章目录 子查询一、子查询的基本使用子查询的分类 二、单行子查询2.1 单行比较操作符2.2 HAVING 中的子查询2.3 CASE中的子查询2.4 子查询中的空值问题2.5 非法使用子查询 三、多行子查询3.1 多行比较操作符3.2 ANY与ALL的区别 四、相关子查询4.1 相关子查询执行流程4.1.1 代码…

【大数据进阶第三阶段之Datax学习笔记】使用阿里云开源离线同步工具DataX 实现数据同步

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…

Django数据库选移的preserve_default=False是什么意思?

有下面的迁移命令&#xff1a; migrations.AddField(model_namemovie,namemov_group,fieldmodels.CharField(defaultdjango.utils.timezone.now, max_length30),preserve_defaultFalse,),迁移命令中的preserve_defaultFalse是什么意思呢&#xff1f; 答&#xff1a;如果模型定…

数学建模.皮尔逊相关系数假设检验

一、步骤 查表找临界值 二、更好的方法 三、使用条件 作图可以使用spss 这个图对不对还不好说&#xff0c;因为还没进行正态分布的验证 四、正态分布验证 &#xff08;1&#xff09;JB检验 所以之前的数据的那个表是错的&#xff0c;因为不满足正态分布 &#xff08;2&#xff…

基于Token认证的登录功能实现

Session 认证和 Token 认证过滤器和拦截器 上篇文章我们讲到了过滤器和拦截器理论知识以及 SpringBoot 集成过滤器和拦截器&#xff0c;本篇文章我们使用过滤器和拦截器去实现基于 Token 认证的登录功能。 一、登录校验 Filter 实现 1.1、Filter 校验流程图 获得请求 url。判…

C语言入门教程,C语言学习教程(第三部分:C语言变量和数据类型)一

第三部分&#xff1a;C语言变量和数据类型 本章也是C语言的基础知识&#xff0c;主要讲解变量、数据类型以及运算符&#xff0c;这其中涉及到了数据的存储格式以及不同进制。 一、大话C语言变量和数据类型 在《数据在内存中的存储&#xff08;二进制形式存储&#xff09;》一…

性能分析与调优: Linux 内存观测工具

目录 一、实验 1.环境 2.vmstat 3.PSI 4.swapon 5.sar 6.slabtop 7.numstat 8.ps 9.top 10.pmap 11.perf 12.bpftrace 二、问题 1.接口读写报错 2.slabtop如何安装 3.numactl如何安装 4.numad启动服务与关闭NUMA 5. perf如何安装 6. kernel-lt-doc与kern…

MySQL:索引失效场景总结

1 执行计划查索引 通过执行计划命令可以查看查询语句使用了什么索引。 EXPLAIN SELECT * FROM ods_finebi_area WHERE areaName = 福建 执行查询计划后,key列的值就是被使用的索引的名称,若key列没有值表示查询未使用索引。 2 在什么列上创建索引 (1)列经常被用于where…

Multi-View-Information-Bottleneck

encoder p θ ( z 1 ∣ v 1 ) _θ(z_1|v_1) θ​(z1​∣v1​)&#xff0c;D S K L _{SKL} SKL​ represents the symmetrized KL divergence. I ˆ ξ ( z 1 ; z 2 ) \^I_ξ(z_1; z_2) Iˆξ​(z1​;z2​) refers to the sample-based parametric mutual information estimatio…

【PyTorch简介】3.Loading and normalizing datasets 加载和规范化数据集

Loading and normalizing datasets 加载和规范化数据集 文章目录 Loading and normalizing datasets 加载和规范化数据集Datasets & DataLoaders 数据集和数据加载器Loading a Dataset 加载数据集Iterating and Visualizing the Dataset 迭代和可视化数据集Creating a Cust…

memory泄露分析方法(java篇)

#memory泄露主要分为java和native 2种&#xff0c;本文主要介绍java# 测试每天从monkey中筛选出内存超标的app&#xff0c;提单流转到我 首先&#xff0c;辨别内存泄露类型&#xff08;java&#xff0c;还是native&#xff09; 从采到的dumpsys_meminfo_pid看java heap&…