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

最新推荐文章于 2023-11-09 21:48:25 发布
最新推荐文章于 2023-11-09 21:48:25 发布
阅读量690 收藏 1
点赞数
分类专栏： 面试 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rick_and_mode/article/details/108651105
版权

如何父传子

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

如何子传父

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

如何兄弟组件传值

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

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

外下羊.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三十二、【vue面试题】兄弟组件的传值（2021/5/3）
weixin_41033048的博客
05-03 407
<!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">
vue面试题——组件相关面试题
qq_51357960的博客
02-26 860
vue面试题——组件相关面试题
Vue面试中，经常会被问到的面试题/Vue知识点整理
sqLeiQ的博客
03-11 866
一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。 在MVVM架构下...
Vue真实技术面试题解析【兄弟组件、vue-router、增量部署】
最新发布
qq_22841387的博客
11-09 2056
兄弟组件的传值方式，有两种方式，把你...Echarts随着浏览器大小变化，如何操作? vue-router的有几种模式? 使用history模式时候，刷新404问题描述一下本地存储 工程当中，Vue是怎么做增量部署的? 两个单页面应用(同一个域名下)）之间怎... 如果需要传输大数据(列表类型的,100条，1000条这... 非对称式加密有了解吗?稍微讲解一下吧 环境变量之间是怎么替换的?比如开发环... 询问技术面试官的问题
vue2-页面之间传值01-父子之间传值（前端面试必面题之一）
weixin_53787454的博客
05-25 1330
vue2-页面之间传值01-父子之间传值（前端面试必面题之一） 前端开发注重组件化开发，使得代码逻辑更清晰，大大降低单个文件的代码量，使得代码可读性和可维护性更高。那么，组件化后，一个前端页面由多个组件组成，父子组件、兄弟组件之间使用同一个数据的场景非常多，而且如果抽取一个组件之后居然没用使用其他组件的值那就没意思了（哈哈哈），而且也是前端面试的一大必面题之一。最后就是组件之间的传值真的很重要 (≧∇≦)/ ！接下来，代码伺候： ———— 记得点赞、收藏、关注 ————
VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
10-14
Vue.js 是一款流行的前端框架，它提供了一种机制让子组件能够向其父组件传递数据。这个过程称为“自定义事件”（Custom Events），在Vue中通过`$emit`方法来实现。本篇文章将深入探讨如何在不同场景下，包括传递单个...
前端面试题，vue详解（组件传值）
01-08
看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。 组件之间传值主要分两种 1、父子组件：props方法、ref方法、children和parent方法、 emit方法 2、非父子组件：...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
Vue父组件向子组件传值以及data和props的区别详解
10-15
总结：Vue父组件向子组件传递值是通过`props`完成的，而`data`则用于管理组件内部的状态。`props`提供了父组件与子组件间数据交互的桥梁，但子组件应保持被动，仅接收和展示数据，而不直接修改。了解并熟练掌握这些...
vue父组件给子组件传值
12-21
Vue提倡单向数据流，即数据从父组件流向子组件，子组件不能直接修改父组件的状态，而是通过事件来通知父组件进行状态更新。下面我们将详细探讨如何在Vue中实现父组件给子组件传值。 1. **Props定义**： 在Vue中，...
【Vue面试题】VUE组件传值的几种方式
qq_40992225的博客
08-25 691
EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以使用它完成通信操作。兄click设置点击事件，用$emit设置通道传参给中转站，弟通过 $on接收来自中转站的参数。任意关系的组件之间的传参可以通过 vue-router 来完成。...
前端面试题 | VUE组件传值，VUEX怎样传值的？
weixin_48491416的博客
03-22 2203
一、父子组件传值 父子组件传值使用props向子组件传递数据 子组件直接使用props接收父组件传递过来的值，接收过来的 值可以直接使用 <template> <div id='logo'>{{logo}}</div> </template> <script> export default{ props:['logo'] name:"headerdiv" data(){ return{
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8402
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
Vue父子组件传值面试这样说就可以了
weixin_34237596的博客
12-16 2830
父组件传子组件的值正常都是从后端获取的，官方推荐使用axios来进行前后端交互，使用 axios.get(), 因为axios返回的是Promise,所以直接用.then() 在里面写个接收函数接收返回值ret,ret的返回值就可以 对应的赋值在在data里面定义的kv值。将data里面获取到的值通过在template中的子组件标签上通过v-bind:xxx = '' 这样父组件的操作就完成了，然...
vue面试之（父传子、子传父、兄弟之间以及vuex）
weixin_44076384的博客
05-18 682
说说vue中数据传递那些事（父传子、子传父、兄弟之间以及vuex） VUE中的数据传递是单向的； (1). 父传子 (2). 子传父 (3). 兄弟之间传递 复制代码 1.父传子（props） 如何让子组件获取到父组件中的数据？ (1). 把父组件的数据以动态属性的方式当在子组件的行间属性上； (2). 在子组件中用props这个属性接收，（对象、数组） (3). 在子组件中使用动态的属性名保持一致； 复制代码 **2.子传父（发布订阅）** (1).在vue的实例m
前端面试题 Vue 组件通信(父传子,子传父,跨组件传值)
m0_60265689的博客
10-07 3846
目录 一, 简单介绍组件通信 二, 详解传值方法 1.父传子 props 2.子传父 $emit 3.跨组件通信 event-bus 一, 简单介绍组件通信 我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动 我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值 下面...
vue最新面试题
热门推荐
猿飞梦的博客
07-01 17万+
最近在面试，总结几个重点的面试题： 一、vue父子组件之间的传值： 简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。（具体案例可以看我之前写的博客）。 二、vue生命周期函数： beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destr...
三十一、【vue面试题】父子组件的传值（2021/5/2）
weixin_41033048的博客
05-03 557
核心思想 子传父：回调函数 //父组件： <zi-zujian @e-zi="getData"></zi-zujian> //子组件： methods:{ send(){ this.$emit('e-zi',this.msg,this.num) } } 原理：父组件通过@e-zi的方法把回调函数传给了子组件，子组件通过$emit触发e-zi,把实参传给回调函数，父组件调用回调函数获取子组件传回来的内容 ..
vue组件子传父传值
09-13
在Vue中，子组件向父组件传值可以通过使用事件来实现。以下是一种常见的实现方法： 1. 在子组件中，使用`$emit`方法触发一个自定义事件，并传递需要传递给父组件的值作为参数。例如，可以在子组件的某个方法中使用`this.$emit('change', value)`来触发名为`change`的事件，并将`value`作为参数传递给父组件。 2. 在父组件中，通过在子组件的标签上监听相应的事件来接收传递过来的值。例如，可以在父组件的模板中使用`v-on:change="handleValueChange"`来监听名为`change`的事件，并将触发事件时传递的值作为参数传递给名为`handleValueChange`的方法。 3. 在父组件的方法中，可以通过接收到的参数来处理传递过来的值，例如更新父组件的数据或执行其他操作。 总结起来，子组件通过`$emit`方法触发一个自定义事件，父组件通过在子组件标签上监听相应的事件来接收传递过来的值。这样就实现了子组件向父组件传值的功能。 参考文献： Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。 下面小编就为大家分享一篇vue 子组件向父组件传值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。 子组件：// 向父组件传递了两个值 this.$emit('change', this.value,this.text); 请注意，以上是一种常见的实现方法，但并不是唯一的方法。在Vue中还有其他方式可以实现子组件向父组件传值的功能，如使用`$parent`属性或通过Vuex进行状态管理等。具体选择哪种方法取决于你的具体需求和项目架构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值