【Vue】组件通信

文章目录

  • 一、组件之间如何通信
  • 二、组件关系分类
  • 三、通信解决方案
  • 四、父子通信流程
  • 五、父向子通信代码示例
  • 六、子向父通信代码示例

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

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

一、组件之间如何通信

68230890309

思考:

  1. 组件之间有哪些关系?
  2. 对应的组件通信方案有哪几类?

二、组件关系分类

  1. 父子关系 (A与B、A与C)
  2. 非父子关系 (B与C)
68231807380

三、通信解决方案

68231811109

四、父子通信流程

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

    ① 父中给子添加自定义属性传值

    ② 子props 接收

    ③ 子组件使用

    props用大白话将就是组件标签身上新增的一个一个自定义属性

  2. 子组件利用 $emit 通知父组件修改更新

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

68231844456

五、父向子通信代码示例

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

父组件App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件<!-- 1.给组件标签,添加属性方式 赋值 --><!-- 如果title前面不加:,就表示写死了 --><Son :title="myTitle"></Son></div>
</template><script>
import Son from "./components/Son.vue"
export default {name: "App",components: {Son,},data() {return {myTitle: "学前端,就来黑马程序员",}},
}
</script><style>
</style>

子组件Son.vue

<template><div class="son" style="border:3px solid #000;margin:10px"><!-- 3.直接使用props的值 -->  我是Son组件  {{ title }}</div>
</template><script>
export default {name: 'Son-Child',// 2.通过props来接受props: ['title']
}
</script><style></style>

68231871178

父向子传值步骤

  1. 给子组件以添加属性的方式传值
  2. 子组件内部通过props接收
  3. 模板中直接使用 props接收的值

六、子向父通信代码示例

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

68231896563

子向父传值步骤

  1. $emit触发事件,给父组件发送消息通知
  2. 父组件监听$emit触发的事件
  3. 提供处理函数,在函数的形参中获取传过来的参数

Son.vue

<template><div class="son" style="border: 3px solid #000; margin: 10px">我是Son组件 {{ title }}<button @click="changeFn">修改title</button></div>
</template><script>
export default {name: 'Son-Child',props: ['title'],methods: {changeFn() {// 通过this.$emit() 向父组件发送通知// 如果不需要传参的话,第二个参数可以直接不写this.$emit('changTitle','传智教育')},},
}
</script><style>
</style>

App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件<!-- 2.父组件对子组件的消息进行监听 --><Son :title="myTitle" @changTitle="handleChange"></Son></div>
</template><script>
import Son from './components/Son.vue'
export default {name: 'App',data() {return {myTitle: '学前端,就来黑马程序员',}},components: {Son,},methods: {// 3.提供处理函数,提供逻辑handleChange(newTitle) {this.myTitle = newTitle},},
}
</script><style>
</style>

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

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

相关文章

k8s学习--kube-proxy的三种工作模式详细解释

kube-proxy 是 Kubernetes 中负责集群中网络规则的组件&#xff0c;它维护网络规则使得 Pod 间的网络通信和访问集群外部的服务成为可能。kube-proxy 支持三种工作模式&#xff1a;userspace 模式、iptables 模式和 ipvs 模式。 快速理解 userspace 模式 实现简单&#xff0c;…

?。。。。。。。。。。。

--超值大礼包&#xff0c;部分原型在线预览地址-- PC端标准化元件库模板&#xff1a; https://axhub.im/pro/db1fd100c40ab6cc/#g1 生鲜电商APP&#xff1a; https://axhub.im/ax9/3ab6ee4196a35d4b/#g1 抖音高保真原型地址&#xff1a; https://axhub.im/pro/56e8362bbc3d4897…

MethodArgumentNotValidException提取关键报错信息返回

问题&#xff1a;报错框架问题 目的&#xff1a;只需要关键提示词&#xff1b; e.message:Validation failed for argument [0] in com.victorlamp.hviot.common.pojo.CommonResult<com.victorlamp.hviot.service.management.entity.thing.Thing> com.victorlamp.hviot…

利用人工智能-智慧合同管理系统规避企业合同管理风险

随着企业业务的不断扩展&#xff0c;合同管理在企业运营中扮演着越来越重要的角色。然而&#xff0c;传统的合同管理方法往往存在效率低下、风险控制不足等问题。为了解决这些问题&#xff0c;道本科技智慧合同管理系统不仅通过合同全生命周期的管理对企业合同管理从宏观上做了…

开发uniapp 小程序时遇到的问题

1、【微信开发者工具报错】routeDone with a webviewId XXX that is not the current page 解决方案: 在app.json 中添加 “lazyCodeLoading”: “requiredComponents” uniapp的话加到manifest.json下的mp-weixin 外部链接文章&#xff1a;解决方案文章1 解决方案文章2 &qu…

flash掉位问题及其解决办法

掉位现象是使用Flash存储器时&#xff0c;由于某些原因导致存储的数据发生错误或丢失的现象。一般可能由于硬件故障、电源问题、软件错误或使用不当等原因引起。 解决Flash掉位问题需要根据具体情况采取不同的方法。常见的解决办法及预防措施包括&#xff1a; 1.检查硬件故障…

SEACells:元细胞分析

元细胞是从单细胞测序数据中衍生的细胞分组&#xff0c;代表高度精细的不同细胞状态。在这里&#xff0c;作者介绍了单细胞细胞状态聚集 (SEACells)&#xff0c;这是一种用于识别元细胞的算法&#xff0c;它克服了单细胞数据的稀疏性&#xff0c;同时保留了传统细胞聚类所掩盖的…

【C++进阶】深入STL之vector:深入研究迭代器失效及拷贝问题

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;初步了解vector &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STL之vector &#x1f4d2;1. 迭…

Linux C语言:数组的定义和初始化

一、数组 1、定义 在程序设计中&#xff0c;为了处理方便&#xff0c;把具有相同类型的若干变量按有序的形式组织起来&#xff0c;具有一定顺序关系的若干个变量的集合就是数组 。 2、特点 组成数组的各个变量称为数组的元素数组中各元素的数据类型要求相同元素在内存中是连…

pdf的压缩该怎么做?快速在线压缩pdf的方法

pdf文件是现在很常用的一种文件格式&#xff0c;有很多的文件内容都可以通过这种格式来展示内容&#xff0c;比如一些通知文件、设计图、个人信息等等&#xff0c;文件的内容越多就会越大&#xff0c;在使用的时候经常会受到一定的限制。那么有什么方法能够快速的将pdf文件变小…

目标检测-AnyLabeling标注格式转换成YOLO格式

Anylabel可以极大的增加数据的标注效率&#xff0c;但是其标注格式如何能转换成YOLO标注格式&#xff0c;具体内容如下所示。 关于AnyLabeling的其它详细介绍如下链接所示 https://blog.csdn.net/u011775793/article/details/134918861 Github链接 https://github.com/vietanhd…

巧用docker+jmeter快速实现分布式百万级并发

分享背景 碰到的问题&#xff1a; 一个JMeter实例可能无法产生足够的负载来对你的应用程序进行压力测试&#xff5e; 解决办法&#xff1a; 1、修改jmeter配置文件里的内存堆 2、引入jmeter分布式压测 带来的问题&#xff1a; 如果我们要做分布式负载测试–我们需要1个…

企业数据挖掘建模平台极简建模流程

泰迪智能科技企业数据挖掘建模平台是企业自主研发&#xff0c;面向企业级用户的快速数据处理构建模型工具。平台底层算法基于R语言、Python、Spark等引擎&#xff0c;使用JAVA语言开发&#xff0c;采用 B/S 结构&#xff0c;用户无需下载客户端&#xff0c;可直接通过浏览器进…

GAT1399协议分析(7)--pycharm anaconde3 配置pyside2

一、安装pyside2 pip install pyside2 二、配置qtdesigner File->Settings->Tools->External tools 点击添加,添加QtDesigner, 注意designer.exe路径,需要在虚拟环境下。 三、添加pySide2 File->Settings->Tools->External tools 点击添加,添加PyS…

高效内容分发:海外短剧推广平台的流媒体传输技术挑战与解决

随着海外短剧市场的蓬勃发展&#xff0c;如何高效地将短剧内容分发给全球观众成为了推广平台必须面对的一大挑战。在这一过程中&#xff0c;流媒体传输技术起着至关重要的作用。然而&#xff0c;由于网络环境的复杂性和多样性&#xff0c;流媒体传输面临着带宽限制、延迟等诸多…

前端--导出

这边记录我们公司后端做的导出接口和前端是如何对接的 这边的技术栈是&#xff1a; 1&#xff1a; react 2&#xff1a; fetch 第一步&#xff1a;简单封装--导出界面 import { DrawerForm } from ant-design/pro-components; import { CloseOutlined } f…

iOS 之homebrew ruby cocoapods 安装

cocoapods安装需要ruby&#xff0c;更新ruby需要rvm&#xff0c;下载rvm需要gpg&#xff0c;下载gpg需要homebrew&#xff0c;所以安装顺序是homebrew->gpg->rvm->ruby-cocoapods Rvm 官网&#xff1a; RVM: Ruby Version Manager - RVM Ruby Version Manager - Docum…

抖音快手短视频直播课程:从0基础到精通,定位、运营、内容、拍摄、剪辑、养号、算法、小店、直播、话术、变现等

随着社交媒体的飞速发展&#xff0c;抖音作为短视频领域的佼佼者&#xff0c;已经成为众多个人和企业展示自我、推广品牌的重要平台。但如何在众多内容中脱颖而出&#xff0c;吸引更多粉丝和关注&#xff0c;成为许多人的困惑。 为此&#xff0c;我们特别推出“抖音运营高手速…

sftp+ssh+nginx部署

SFTP方式登录服务器部署静态资源 使用软件&#xff1a;xftp IP&#xff1a;xx.xx.xx.xx 用户名&#xff1a;root 密码&#xff1a;xx SSH方式登录服务器修改nginx配置文件 使用软件&#xff1a;xshell、putty IP&#xff1a;xx.xx.xx.xx 用户名&#xff1a;root 密码&#x…

docker_构建镜像成功但启动容器的执行程序总是报文件找不到(lesson)

碰到问题 有一次做了一个镜像&#xff0c;制作成功&#xff0c;但运行容器总是报错&#xff1a;找不到文件。 dockerfile如下&#xff1a; FROM golang:1.18 AS builder WORKDIR /app COPY go.mod main.go ./ RUN go mod download COPY . . RUN go build -o tools_cpu_burner…