VUE--组件通信(父子)

1、什么是组件通信

        组件通信就是指组件与组件之间的数据传递。因为组件的数据是独立的,无法直接访问其他组件的数据,想获取其他组件的数据,就需要用到组件通信。

2、组件关系分类(如图)

        ● 父子关系(props 和 $emit

        ● 非父子关系(provide & inject;eventbus

        通用解决方案:Vuex--适合于复杂业务场景

3、父组件向子组件传递数据

        父组件利用props向子组件传递数据

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

// 父组件
<template><div class="main"><!-- 1、给子组件以自定义属性方式传值,btnName为自定义属性 --><my-button :btnName="name"></my-button></div>
</template><script>
import myButton from "./myButton.vue";
export default {data() {return {name: "父组件传值",};},components: { myButton },
};
</script>
// 子组件
<template><div><!-- 2、子组件模板中直接使用 --><button>{{ btnName }}</button></div>
</template><script>
export default {data() {return {};},// 2、子组件内部通过props接收props: {btnName: String,},
};
</script>

        结果如下--按钮名称为“父组件传值”:

 4、子组件向父组件传递数据

        子组件利用$emit 通知父组件,对数据进行更新

        ① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

// 子组件
<template><div><button @click="changBtnName">{{ btnName }}</button></div>
</template><script>
export default {data() {return {};},props: {btnName: String,},methods: {changBtnName() {// 1、$emit 触发事件,给父组件发送消息通知this.$emit("changBtnName", "修改名称");},},
};
</script>
// 父组件
<template><div class="main"><!-- 2、父组件监听事件 --><my-button :btnName="name" @changBtnName="handleChange"></my-button></div>
</template><script>
import myButton from "./myButton.vue";
export default {data() {return {name: "父组件传值",};},components: { myButton },methods: {handleChange(val) {// 3、提供处理参数,此处的形参(val)代表子组件传递过来的参数this.name = val;},},
};
</script>

        结果如下--点击子组件的按钮后,名称更新为“修改名称” 

 

5、父子组件之间传值还可使用 ref & refs

        详见以下链接:VUE--- ref & refs-CSDN博客

扩展: 

 1、什么是prop

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

        ● 作用:向子组件传递数据

        ● 特点:可以传递任意数量、任意类型的prop

2、prop校验

        作用:为组件的prop指定验证要求,不符合要求的,控制台就会有错误提示,帮助开发者快速发现错误。

        类型:

                a、类型校验

                b、非空校验

                c、默认值校验

                d、自定义校验

prop: {校验的属性名: {type: 类型, // Number, Boolean, Object, String ...required: true, // 表示父组件必须传递这个值default: 默认值, // 默认值如果是数组或对象,要写成函数格式,函数中返回数组或对象validator(value) {// 自定义校验规则return 是否通过校验}}
}    

3、prop & data 的区别 

        ● data的数据是自己的,可以随便修改

        ● prop的数据是外部的,不能直接修改,要遵循单项数据流

4、单向数据流

        父级prop的数据更新,会向下流动,影响子组件。这个数据流动是单向的,无法反向流动。

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

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

相关文章

虚拟机安装宝塔的坑

问题&#xff1a; 在虚拟机中centos7和centos8中安装宝塔之后&#xff0c;无法访问面板。 解决&#xff1a; 1.先关闭防火墙&#xff08;如果本机能够ping通相关端口&#xff0c;则不用关闭防火墙&#xff09; 2.最新的宝塔会自动开启ssl协议&#xff0c;需要手动关闭。…

Python连接数据库的梳理

我们通常用的数据库类型主要有关系型数据库&#xff0c;非关系型数据库等&#xff0c;其中关系型数据库主要有Microsoft SQL Server ,MySQL,Oracle&#xff0c;SQLite等&#xff0c;常用的非关系型数据库包括Redis、DynamoDB&#xff0c;MongoDB等 ​​​​​​​ 一 关系型…

MongoDB之索引

常用命令 查看表的索引 db.<table>.getIndexes() 查看表索引的大小 db.<table>.totalIndexSize() 重建索引 db.<table>.reIndex() 删除索引 db.COLLECTION_NAME.dropIndex("INDEX-NAME") db.COLLECTION_NAME.dropIndexes() _id 索引无法删…

MCU最小系统原理图中四个问题详解——芯片中有很多电源管脚的原因(VDD/VSS/VBAT)、LC滤波、两级滤波、NC可切换元件

前言&#xff1a;本文对MCU最小系统原理图中的四个问题进行详解&#xff1a;芯片中有很多电源管脚的原因&#xff08;VDD/VSS/VBAT&#xff09;、LC滤波、两级滤波、NC可切换元件。本文以GD32F103C8T6最小系统原理图举例 目录&#xff1a; 芯片中有很多电源管脚的原因&#x…

echarts dataZoom实现左右滑动与放大缩小 并精确控制显示几条数据

//Xdata是横轴的长度&#xff08;若x轴80条数据&#xff0c;默认显示最新的20条&#xff09; var start Xdata.length - 20; var end Xdata.length - 1; dataZoom: [ type: slider, show: true, startValue: dataZoomStart, endValue: dataZoomEnd, dataBackground: { ar…

STL——list

1、list介绍 1. list 是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list 的底层是带头双向循环链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向其前一个元素和后…

CVE-2023-46226 Apache iotdb远程代码执行漏洞

项目介绍 Apache IoTDB 是针对时间序列数据收集、存储与分析一体化的数据管理引擎。它具有体量轻、性能高、易使用的特点&#xff0c;完美对接 Hadoop 与 Spark 生态&#xff0c;适用于工业物联网应用中海量时间序列数据高速写入和复杂分析查询的需求。 项目地址 https://io…

Leetcoder Day9|栈与队列part01

语言&#xff1a;Java/C 目录 理论基础 C 栈 队列 Java 栈 队列 ​编辑 232.用栈实现队列 225. 用队列实现栈 Queue Deque 今日心得 理论基础 又是考研时数据结构里接触到的老朋友&#xff0c;栈是先进后出&#xff0c;队列是先进先出。 C 现在刷题除了思路还…

力扣-202. 快乐数解析-弗洛伊德循环查找算法

题目链接 public static void Happy(int n) {int sum 0;int digit 0;for (int i 0; i < 20; i) {while (n ! 0) {digit n%10;sum digit*digit;n/10;}System.out.print(sum " ");n sum;sum 0;}} 使用代码测试一下每一代数字 n 2 : 4 16 37 58 89 145 42 …

自然语言处理(Natural Language Processing,NLP)解密

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…

Servlet中service()与doGet() doPost() 是什么关系

Servlet&#xff08;Server Applet&#xff09;&#xff0c;全称Java Servlet。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据&#xff0c;生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口&#xff0c;广义的Servlet是指任何实现了这个Servlet…

关于去除信号中的直流分量效果演示(零频率分量)

本文作者&#xff1a; slience_me 文章目录 关于去除信号中的直流分量效果演示&#xff08;零频率分量&#xff09;1. 效果图展示&#xff1a;2. 快速傅里叶变换FFT3. 相关验证代码 关于去除信号中的直流分量效果演示&#xff08;零频率分量&#xff09; 1. 效果图展示&#x…

JDK 动态代理(Spring AOP 的原理)(面试重点)

代理模式 也叫委托模式.定义&#xff1a;为其他对象提供⼀种代理以控制对这个对象的访问.它的作⽤就是通过提供⼀个代理类,让我们 在调⽤⽬标⽅法的时候,不再是直接对⽬标⽅法进⾏调⽤,⽽是通过代理类间接调⽤&#xff0c;在某些情况下,⼀个对象不适合或者不能直接引⽤另⼀个对…

51单片机蜂鸣器

蜂鸣器 蜂鸣器的工作原理 三极管的工作原理 三极管是一种半导体器件&#xff0c;通常由三个掺杂不同的半导体材料层构成。它常用于放大和开关电路中。三极管的工作原理可简述如下&#xff1a; 放大作用&#xff1a;三极管可以放大电流和电压信号。它的工作原理基于控制一个较大…

Web前端与低代码可以碰出什么火花?

技术快速迭代&#xff0c;Web前端开发已经逐渐成为构建现代应用程序的关键组成部分。它不仅涉及到美观的界面设计&#xff0c;还包括后端功能的实现&#xff0c;以及跨平台兼容性的考虑。然而&#xff0c;传统的Web前端开发过程往往需要进行长时间的编码和调试&#xff0c;这使…

LTC6820和isoSPI使用

1、MSTR主控/受控 MSTR (引脚 11/ 引脚 12)&#xff1a;串行接口主 / 从选择器输入。MSTR接VCC&#xff0c;则LTC6820为从机&#xff1b;MSTR接GND&#xff0c;则LTC6820为主机 2、SLOW慢速/快速 SLOW (引脚 12/ 引脚 13)&#xff1a;慢速接口选择输入。当时钟频率≤ 200kHz …

C++和Python最常用的库框架一览

一、C常用库 1. 标准模板库(STL) STL包含丰富的数据结构与算法。比如vector动态数组;list双向链表;map基于红黑树实现,支持快速查找键值对。常用算法有sort排序、find搜索等。这些容器算法类和函数模板,是C程序员必不可少的基础。 2. Boost Boost是近年兴起的高质量C库集合…

网络安全:守护数字世界的盾牌

在当今数字化的时代&#xff0c;网络已经渗透到我们生活的方方面面。从社交媒体到在线银行&#xff0c;从在线购物到工作文件传输&#xff0c;网络几乎无处不在。然而&#xff0c;随着网络的普及&#xff0c;网络安全问题也日益凸显。那么&#xff0c;如何确保我们的数字资产安…

递归、搜索与回溯算法(专题一:递归)

往期文章&#xff08;希望小伙伴们在看这篇文章之前&#xff0c;看一下往期文章&#xff09; &#xff08;1&#xff09;递归、搜索与回溯算法&#xff08;专题零&#xff1a;解释回溯算法中涉及到的名词&#xff09;【回溯算法入门必看】-CSDN博客 接下来我会用几道题&#…

Docker-安装实践(mysql,redis集群,tomcat)

docker实践(提供几个安装案例&#xff09; 安装Tomcat # 拉取镜像,可以指定标签不指定默认为最新 docker pull tomcat docker run -itd -p 8080:8080 --name tomcat tomcat:latest #这样内部默认80端口&#xff0c;主机的映射端口会随机分配一个 docker run -itd -P tomcat…