Vue前端面试题总结（二十七） 如何理解vue里的父传子 子传父 和兄弟组件传值 详解

最新推荐文章于 2025-02-11 21:33:10 发布
最新推荐文章于 2025-02-11 21:33:10 发布
阅读量771 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 面试 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Rick_and_mode/article/details/108651105
本文详细介绍了Vue.js中不同组件间的通信方式，包括父组件向子组件传递数据的方法、子组件向父组件发送数据的机制以及兄弟组件间利用事件总线进行数据交换的技术。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如何父传子

父组件通过import引入子组件 并且注册 在子组件标签上挂载需要传递的值 子组件通过props验证 接收
接收有两种
第一种是通过数组的方式 [‘要接受的属性’]
第二种是通过对象的方式传递设置数据类型和值
而数组只是简单的接收

如何子传父

子传父是通过绑定的事件触发函数 在其中的设置的this.$emit
传递自定义的事件和要传递的值
$emit中有两个参数 一个是要派发的自定义事件 一个是要传递的值

如何兄弟组件传值

创建一个空的Vue实例并且暴露出去 这个作为公共的Bus 作为兄弟组件桥接的桥梁
然后在兄弟组件里分别引入这个创建的Bus
在组件A中通过Bus.$emit(‘自定义事件’，要传递值)

在组件B中通过Bus.$on(‘自定义事件名’，function（v）{})
注意这里创建的v 是我们在组件B中即将接收的数据

前端面试题 Vue 组件通信(父传子,子传父,跨组件传值)
m0_60265689的博客
10-07 4139
目录 一, 简单介绍组件通信 二, 详解传值方法 1.父传子 props 2.子传父 $emit 3.跨组件通信 event-bus 一, 简单介绍组件通信 我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动 我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值 下面...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
热门推荐
MingL520的博客
07-17 8万+
文档描述 本文是关注微信小程序的开发和面试问题， 由基础到困难循序渐进， 适合面试和开发小程序。 并有热点框架（vue react node.js 全栈）前端资源以及后端视频资源和源码 并基于前端进阶和面试的需求 总结了常用插件和js算法 以及html/css和js热点面试题 因为csdn不可以有外链 所以答案链接在评论区！！！ Vue面试题 生命周期函数面试题 1.什么是...
前端面试题，vue详解（组件传值）
01-08
看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。 组件之间传值主要分两种 1、父子组件：props方法、ref方法、children和parent方法、 emit方法 2、非父子组件：公共bus.js、attrs/listeners、vuex 一、父子组件传值 1、props方法 父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象 父组件 // 引入子组件 import child from './child' export default { component
vue面试之（父传子、子传父、兄弟之间以及vuex）
weixin_44076384的博客
05-18 727
说说vue中数据传递那些事（父传子、子传父、兄弟之间以及vuex） VUE中的数据传递是单向的； (1). 父传子 (2). 子传父 (3). 兄弟之间传递 复制代码 1.父传子（props） 如何让子组件获取到父组件中的数据？ (1). 把父组件的数据以动态属性的方式当在子组件的行间属性上； (2). 在子组件中用props这个属性接收，（对象、数组） (3). 在子组件中使用动态的属性名保持一致； 复制代码 **2.子传父（发布订阅）** (1).在vue的实例m
前端面试题169（详解vue组件传值）
God's asylum的博客
09-04 1068
子组件可以通过$emit触发事件，父组件则可以在使用子组件的地方监听这个事件。} } };} } };} } };} } };</} } };</} } };} } };} } };} } };} } };} } };;} } };} } };} } };;} } };</} } };
【Vue面试题】VUE组件传值的几种方式
qq_40992225的博客
08-25 795
EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作。兄click设置点击事件，用$emit设置通道传参给中转站，弟通过 $on接收来自中转站的参数。任意关系的组件之间的传参可以通过 vue-router 来完成。...
vue组件之间传值方式方法---实战面试篇
weixin_45471506的博客
07-26 1079
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue进阶（四十七）：面试必备：2024 Vue经典面试题总结（含答案
2401_85158710的博客
07-14 801
MVVM是的缩写。MVVM是一种设计思想。Model层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View代表UI 组件，它负责将数据模型转化成UI展现出来，ViewModel是一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的， 因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上。ViewModel。
2022年前端Vue常见面试题大全（三万长文）持续更新
drhrht的博客
03-07 1399
目录 1.Vue和React有什么不同？使用场景分别是什么？ 2.axios是什么？怎么使用它，怎么解决跨域？ 3.说说Vue，React，angularjs，jquery的区别 4.什么阶段（生命周期）才能访问操作dom？为什么 5.组件中的data为什么是个函数？ 6.说一说scoped样式隔离 7.v-if与v-show的区别？ 8.什么是MVVM？ 9.Vue修饰符有哪些？ 10.函数式组件使用场景和原理 11.能说下 vue-router 中常用的路由模式实现原理吗？ 12.GET和POST的区别
白店小二的面试总结——Vue里页面间传值
liyangyang1998的博客
08-06 235
1、父子组件传值 props 父组件 通过绑定变量对子组件传参 <player class="playAudio" v-if="playMusicd == true" :changeMusic="orchangeMusic"></player> components: { //父组件里定义子组件，才能在父组件里使用子组件 player: player }, 子组件 props: ["changeMusic"],//定义父组件的传参 data() { ret
vue子传父
weixin_49614436的博客
04-23 215
子传父 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听 1.在子组件中创建一个按钮，给按钮绑定一个点击事件 2.在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数 <template> <div class="son"> <button @click="sendTOParent"
vue2-页面之间传值01-父子之间传值（前端面试必面题之一）
weixin_53787454的博客
05-25 1560
vue2-页面之间传值01-父子之间传值（前端面试必面题之一） 前端开发注重组件化开发，使得代码逻辑更清晰，大大降低单个文件的代码量，使得代码可读性和可维护性更高。那么，组件化后，一个前端页面由多个组件组成，父子组件、兄弟组件之间使用同一个数据的场景非常多，而且如果抽取一个组件之后居然没用使用其他组件的值那就没意思了（哈哈哈），而且也是前端面试的一大必面题之一。最后就是组件之间的传值真的很重要 (≧∇≦)/ ！接下来，代码伺候： ———— 记得点赞、收藏、关注 ————
vue面试题总结（一）
zkxjpq的博客
03-11 153
1、vue的特点是什么？ 国人开发的一个较轻量级框架。 双向数据绑定，在数据操作方面更为简单。 视图、数据、结构分离，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。 组件化，方便封装和复用。 虚拟DOM：dom操作是非常消耗性能的，不再使用原生的dom操作节点，极大解放dom操作 2、vue组件是如何传值的？ 3、v-show和v-if指令的共同点和不同点？ 共同点：都能控制元素的显示与隐藏 不同点：实现本质方法不同 v-show本质就是通过控制css中的display设置为none，
三十二、【vue面试题】兄弟组件的传值（2021/5/3）
weixin_41033048的博客
05-03 456
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
44 父子组件之间的传值 [vue面试题]
weixin_50464014的博客
10-10 142
占坑
MVVM
weixin_30767921的博客
05-09 276
前端：MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：D...
【前端】【面试】【经典一道题】vue中组件传值的几种方式
最新发布
qq_59344127的博客
02-11 487
vue的几种传值方式，父子，兄弟传值的细化
【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit
CHLing19971130的博客
04-14 2312
Vue中父子组件利用Props和$emit进行通信传值，其中介绍了Props和$emit的定义和如何在父子组件中的使用，怎么实现通信传值的。
Vue封装动画插件，渐隐渐现效果
yipanhuasheng的博客
07-30 935
通过js封装的Vue渐隐渐现效果大体两种方法：1、通过Velocity.js 2、原生js写动画 1、通过Velocity.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值