当前位置: 首页 > news >正文

vue2面试题:vue组件之间的通信方式有哪些?

vue2面试题:vue组件之间的通信方式有哪些?

  • 回答思路:1.组件通信的目的-->2.组件通信的分类-->3.组件通信的方案
    • 1.组件通信的目的
    • 2.组件通信的分类
    • 3.组件通信的方案
      • (1)通过props传递数据
      • (2)$emit触发自定义事件
      • (3)ref
      • (4)EventBus
      • (5)parent、root
      • (6)attrs与listeners
      • (7)provide与inject
      • (8)vuex
    • 小结

回答思路:1.组件通信的目的–>2.组件通信的分类–>3.组件通信的方案

1.组件通信的目的

每个组件之间都有自己独自的作用区域,组件之间的数据是无法共享的,但在实际开发工作中,我们常常需要让座组件之间共享数据,这也是组件通信的目的

2.组件通信的分类

组件间通信的分类可分为以下:
1.父子组件之间的通信
2.兄弟组件之间的通信
3.祖孙与后代组件之间的通信
4.非关系组件之间的通信

3.组件通信的方案

(1)通过props传递数据

1.适用场景:父组件传递数据给子组件
2.组件设置props属性,定义接收父组件传过来的参数
3.父组件在使用子组件标签中通过字面量来传递值
children.vue:

props:{name:Stringage:{type:Number,default:18,require:true	}
}

father.vue:

<children name="tom" age=18>

(2)$emit触发自定义事件

1.适用场景:子组件传递数据给父组件

2.子组件通过$emit触发自定义事件,
$emit第二个参数为传递的值

3.父组件绑定监听器获取到子组件传过来的参数
children.vue:

this.$emit('add',1)

father.vue:

<children @add="numAdd($event)" />

(3)ref

1.适用场景:子组件传递数据给父组件

2.父组件通过设置子组件ref来获取数据
father.vue:

<children ref="foo">
<div>this.$refs.foo</div>

(4)EventBus

1.适用场景:兄弟组件传值

2.创建一个中央事件总线EventBus

3.兄弟组件通过$emit触发自定义事件,第二个参数传递的值

4.另一个兄弟组件通过$on监听自定义事件

// 
class Bus { constructor() { this.callbacks = {}; // 事件的名字} $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } 
} // main.js 
Vue.prototype.$bus = new Bus() // 将$bus挂载到 vue实例的原型上 
// 另一种方法
Vue.prototype.$bus = new Vue() // Vue已经实现了 Bus的功能

children1.vue:

this.$bus.$emit('foo')`在这里插入代码片`

children2.vue:

this.$bus.$on('foo',2)

(5)parent、root

通过共同祖辈$parent或者
$root搭建通信桥

兄弟组件:

this.$parent.on('add',this.add)

另一个兄弟组件:

this.$parent.emit('add')

(6)attrs与listeners

1.适用场景:祖先传递数据给子孙

2.设置批量向下传属性$attrs和
$listeners

3.class,style等非props属性也是通过$attrs可以将父组件中的这些特定绑定属性传递给子组件

4.可以通过v-bind="$attrs"传入内部组件

// child:没有在 props中声明 foo 
<p>{{$attrs.foo}}</p> // parent 
<HelloWorld foo="foo"/>
// 给Grandson隔代传值 
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2 的儿子
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson 中
<div @click="$emit('some-event', 'msg from grandson')"> 
{{msg}} 
</div>

(7)provide与inject

1.在祖先组件定义Provide属性返回传递的值

2.在后代组件通过inject接收组件传递过来的值
祖先组件:

<!-- 祖先组件 -->
<template><div><child-component></child-component></div>
</template><script>
export default {provide: {message: 'Hello from ancestor',count: 10},components: {ChildComponent}
}
</script>

后代组件:

<!-- 后代组件 -->
<template><div><p>{{ message }}</p><p>{{ count }}</p></div>
</template><script>
export default {inject: ['message', 'count']
}
</script>

(8)vuex

1.适用场景:复杂关系的组件数据传递
2.vuex作用相当于一个用来存储共享变量的容器
3.state用来存放共享变量的地方
3.getter:可以增加一个getter派生状态,相当于store中的计算属性,用来获得共享变量的值
4.mutations用来存放修改state的方法
5.actions也是用来存放修改state的方法,在mutations的基础上进行,常用来做一些异步操作

小结

1.父子数据传递:props,$emit,ref

1.1:父传子:props
1.2:子传父:$emit、ref 

2.兄弟数据传递:eventbus,$parent

3.祖孙与后代数据传递:attrs与listeners或provide与inject

4.复杂关系数据传递:vuex

相关文章:

vue2面试题:vue组件之间的通信方式有哪些?

vue2面试题&#xff1a;vue组件之间的通信方式有哪些&#xff1f; 回答思路&#xff1a;1.组件通信的目的-->2.组件通信的分类-->3.组件通信的方案1.组件通信的目的2.组件通信的分类3.组件通信的方案&#xff08;1&#xff09;通过props传递数据&#xff08;2&#xff09…...

Pytorch神经网络模型nn.Sequential与nn.Linear

1、定义模型 对于标准深度学习模型&#xff0c;我们可以使用框架的预定义好的层。这使我们只需关注使用哪些层来构造模型&#xff0c;而不必关注层的实现细节。 我们首先定义一个模型变量net&#xff0c;它是一个Sequential类的实例。 Sequential类将多个层串联在一起。 当给…...

C++-gdb调试常用功能

文章目录 启动gdb运行程序设置断点运行控制查看源码查看信息查看变量线程相关 gdb调试常用功能如下&#xff0c;其中bin为要调试的程序&#xff0c;arg为参数 启动gdb 启动调试 gdb bin带参数启动 gdb --args bin arg1 arg2so预加载LD_PRELOAD/path/to/lib.so && gdb …...

快速上手的AI工具-文心一言辅助学习

前言 大家好晚上好&#xff0c;现在AI技术的发展&#xff0c;它已经渗透到我们生活的各个层面。对于普通人来说&#xff0c;理解并有效利用AI技术不仅能增强个人竞争力&#xff0c;还能在日常生活中带来便利。无论是提高工作效率&#xff0c;还是优化日常任务&#xff0c;AI工…...

Boost 适用 filesystem 库,statx 函数无法找到引用问题的解决方案。

1、boost 高版本使用了 statx 函数&#xff0c;这个函数是在 Linux 内核版本 4.11 之后引入的。 所以&#xff1a;可以升级 Linux 内核版本到4.11之后即可。 2、降低 boost 库版本到 1.70 以下 3、正确的路&#xff0c;改 boost 的编译代码 先看这个&#xff1a; Filesyste…...

MyBatis中一级缓存是什么?SqlSession一级缓存失效的原因?如何理解一级缓存?

一级缓存是SqlSession级别的&#xff0c;通过同一个SqlSession查询的数据会被缓存&#xff0c;下次查询相同的数据&#xff0c;就 会从缓存中直接获取&#xff0c;不会从数据库重新访问 使一级缓存失效的四种情况&#xff1a; 1) 不同的SqlSession对应不同的一级缓存 2) 同一…...

项目解决方案:多地医馆的高清视频监控接入汇聚联网

目 录 一、背景 二、建设目标及需求 1.建设目标 2.现状分析 3.需求分析 三、方案设计 1.设计依据 2.设计原则 3.方案设计 3.1 方案描述 3.2 组网说明 四、产品介绍 1.视频监控综合资源管理平台介绍 2.视频录像服务器和存储 2.1概述 2.2存储设计 …...

【前端基础--2】

选择器优先级 style标签中&#xff1a; .text{color: pink;}div{color: red;}#box{color: skyblue;} body标签中&#xff1a; <div class"text" id"box">猜猜我是什么颜色的</div> 运行结果&#xff1a; 选择器优先级权重&#xff1a; id选…...

【GitHub项目推荐--提取文字】【转载】

提取视频中的字幕 这个开源项目是提取视频中字幕的开源项目&#xff0c;提取视频中的关键帧&#xff0c;检测视频帧中文本的所在位置&#xff0c;识别视频帧中文本的内容。 不知道大家有没有做笔记的习惯&#xff0c;这个开源项目就很方便的把你一个视频中的字幕提取出来&…...

WebSocket与Shiro认证信息传递的实现与安全性探讨

在现代Web应用程序中&#xff0c;WebSocket已经成为实时双向通信的重要组件。而Shiro作为一个强大的Java安全框架&#xff0c;用于处理身份验证、授权和会话管理。本文将探讨如何通过WebSocket与Shiro集成&#xff0c;实现认证信息的传递&#xff0c;并关注在这一过程中确保安全…...

QT 实现自动生成小学两位数加减法算式

小学生加减法训练 QT实现–自动生成两位数加减法算式&#xff0c;并输出txt文件 可以copy到word文件&#xff0c;设置适当字体大小和行间距&#xff0c;带回家给娃做做题 void MainWindow::test(int answerMax, int count) {// 创建一个随机数生成器QRandomGenerator *gener…...

小程序学习-20

建议每次构建npm之前都先删除miniprogram_npm...

面试题-【消息队列】

消息队列 问题1 如何进行消息队列的技术选型优点解耦 &#xff08;pub/sub模型&#xff09;异步&#xff08;异步接口性能优化&#xff09;削峰 使用消息队列的缺点几种消息队列的特性 问题2 引入消息队列之后该如何保证其高可用性RabbitMQ的高可用kafka高可用 问题3 在消息队列…...

【江科大】STM32:I2C通信外设(硬件)

在将2C通信外设之前&#xff0c;我们先捋一捋&#xff0c;串口的相关特点来和I2C进行一个对北比。 首先&#xff1a; 1,大部分单片机&#xff0c;设计的PCB板均带有串口通信的引脚&#xff08;也就是通信基本都借助硬件收发器来实现&#xff09; 2.对于串口的异步时序&#xff…...

【机器学习300问】15、什么是逻辑回归模型?

一、逻辑回归模型是为了解决什么问题&#xff1f; 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广义线性回归分析模型&#xff0c;尤其适用于解决二分类问题&#xff08;输出为两个类别&#xff09;。 &#xff08;1&#xff09;二分类举例 邮件过滤&#xff…...

C#调用C动态链接库

前言 已经没写过博客好久了&#xff0c;上一篇还是1年半前写的LTE Gold序列学习笔记&#xff0c;因为工作是做通信协议的&#xff0c;然后因为大学时没好好学习专业课&#xff0c;现在理论还不扎实&#xff0c;不敢瞎写&#xff1b; 因为工作原因&#xff0c;经常需要分析一些字…...

前端实现转盘抽奖 - 使用 lucky-canvas 插件

目录 需求背景需求实现实现过程图片示意实现代码 页面效果lucky-canvas 插件官方文档 需求背景 要求实现转盘转动抽奖的功能&#xff1a; 只有正确率大于等于 80% 才可以进行抽奖&#xff1b;“谢谢参与”概率为 90%&#xff0c;“恭喜中奖”概率为 10%&#xff1b; 需求实现 实…...

2024.1.23力扣每日一题——最长交替子数组

2024.1.23 题目来源我的题解方法一 枚举 题目来源 力扣每日一题&#xff1b;题序&#xff1a;2765 我的题解 方法一 枚举 每次都以两个相邻作为满足要求的循环数据&#xff0c;并且以一个布尔变量控制循环的位置 时间复杂度&#xff1a;O(n) 空间复杂度&#xff1a;O(1) pub…...

C语言王道练习题第七周两题

第一题 Description 输入一个学生的学号&#xff0c;姓名&#xff0c;性别&#xff0c;用结构体存储&#xff0c;通过 scanf 读取后&#xff0c;然后再 通过 printf 打印输出 Input 学号&#xff0c;姓名&#xff0c;性别&#xff0c;例如输入 101 xiongda m Output 输出…...

某马头条——day11+day12

实时计算和定时计算 流式计算 kafkaStream 入门案例 导入依赖 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-streams</artifactId><exclusions><exclusion><artifactId>connect-json</artifactId&…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

3.3.1_1 检错编码(奇偶校验码)

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...