三十一、【vue面试题】父子组件的传值（2021/5/2）

最新推荐文章于 2024-07-23 21:46:42 发布

叶川飞流

最新推荐文章于 2024-07-23 21:46:42 发布

阅读量586

点赞数

分类专栏：前端js面试题集锦记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/116358789

版权

本文探讨了Vue中父子组件之间的数据传递，主要方法是通过父组件定义回调函数，然后经由子组件的$emit事件将值传回父组件。详细解析了子组件如何利用回调函数向父组件传递数据的过程。

摘要由CSDN通过智能技术生成

核心思想

子传父：回调函数

//父组件：
<zi-zujian @e-zi="getData"></zi-zujian>
//子组件：
methods:{
   
        send(){
   
                this

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

叶川飞流

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端面试题 Vue 组件通信(父传子,子传父,跨组件传值)

m0_60265689的博客

10-07

3924

目录一, 简单介绍组件通信二, 详解传值方法 1.父传子 props 2.子传父 $emit 3.跨组件通信 event-bus 一, 简单介绍组件通信我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值下面...

前端面试题：说一下Vue中的组件怎么传值

qq_46582421的博客

01-06

618

父组件向子组件传值：子组件在props中创建一个属性，用以接收父组件传过来的数据。父组件中注册子组件。通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据传递到子组件的内部，供子组件使用。在子组件标签中添加子组件props中创建的属性。把需要传给子组件的值赋给该属性。注意： prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。 prop 是单向绑定的：当父组件的

参与评论您还未登录，请先登录后发表或查看评论

前端面试题，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

44 父子组件之间的传值 [vue面试题]

weixin_50464014的博客

10-10

115

占坑

Vue系列面试题

最新发布

qq_44186810的博客

07-23

2238

Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。

面试-父子组件传值问题

木玄客的博客

12-11

818

Vue是个以组件化开发著称的框架：于是组件间传值就经常被用到： 1、父传子：prop，slot prop只是一个传值，子组件在script的prop中声明后可以直接进行使用注意：prop传递值不能在子组件进行修改，不然浏览器会报错，需要通过赋值给子组件自身申明的元素才能进行修改 slot（插槽）:与prop不同，插槽支持html语句插入以及组件插入，只要在子组件同样写上slot就能成功展示注意: slot传值在父组件传值之后，在子组件进行使用需要用slot-scope属性进行声明 2、子传父：emit

vue 父子组件传值问题

菜鸟博客

06-05

321

父组件 data里的值，在子组件中可以通过 props拿到，props：［］；子组件可以通过$emit来通知父组件。比如在子元素中添加一个点击事件或者 change事件。可以通过 this.$emit('change')去通知父组件，父组件 html 里面通过 @change注册接收。如果需要这个事件传输参数的话，可以写 this.$emit（‘change’，this.page）传参。如果参...

【Vue】关于父子组件之间的传值问题

陶洲川的博客

05-18

461

一、问题 1.1、环境电脑环境：Windows 10；开发工具：IntelliJ IDEA；数据库环境：Redis 3.2.100 JDK环境: Jdk1.8； 1.2、问题父子组件之间,如何传值呢? (注意：本文中的中文中括号【】中引用的，一般都是特定不变的值，或者固定名称，请细品) 二、解答我们知道,Vue.js定义了父子组件的概念;我们可以通过子组件的属性(property,vue中简写为props)给子组件传值; 下面看一个例子: 父组件的HTML: 这里的data是父组件中的对象；

vue组件传值面试题

02-29

1. 请介绍Vue组件之间的父子组件传值方式。答：Vue组件之间的父子组件传值方式有props和$emit。通过props可以将数据从父组件传递给子组件，子组件通过props接收数据。而$emit则是在子组件中触发一个自定义事件，并...

Vue一个例子看懂父子组件之间传值

weixin_33801856的博客

05-03

323

最近在做vue的项目,发现项目中有很多功能是重复的,这时我们就需要想到将这一部分的功能做成一个组件来减少我们的代码量,使代码看起来更加的简洁,优美.下面我们就来谈谈封装公共组件时遇到的一些问题 1.父组件往子组件中传值这个是最简单的,首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子...

【Vue.js】父子组件传值

Kamen_Yip的博客

12-20

364

父传子子组件代码： &lt;template&gt; &lt;!-- 绑定按钮的内容和样式，从父组件传 type 和 btnContent --&gt; &lt;button :class="type"&gt;{{btnContent}}&lt;/button&gt; &lt;/template&gt;

【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit

CHLing19971130的博客

04-14

2229

Vue中父子组件利用Props和$emit进行通信传值，其中介绍了Props和$emit的定义和如何在父子组件中的使用，怎么实现通信传值的。

Vue父子组件传值面试这样说就可以了

weixin_34237596的博客

12-16

2838

父组件传子组件的值正常都是从后端获取的，官方推荐使用axios来进行前后端交互，使用 axios.get(), 因为axios返回的是Promise,所以直接用.then() 在里面写个接收函数接收返回值ret,ret的返回值就可以对应的赋值在在data里面定义的kv值。将data里面获取到的值通过在template中的子组件标签上通过v-bind:xxx = '' 这样父组件的操作就完成了，然...

vue中你不知道的父子组件之间传值

weixin_43904993的博客

06-21

(1)直接父组件传值给子组件父 <div class="temp1"> <div>{{num}}</div> <temp2 num='123' /> </div> 子

白店小二的面试总结——Vue里页面间传值

liyangyang1998的博客

08-06

190

1、父子组件传值 props 父组件通过绑定变量对子组件传参 <player class="playAudio" v-if="playMusicd == true" :changeMusic="orchangeMusic"></player> components: { //父组件里定义子组件，才能在父组件里使用子组件 player: player }, 子组件 props: ["changeMusic"],//定义父组件的传参 data() { ret

vue父子组件的传值总结

07-15

199

在开发vue项目中，父子组件的传值是避免不掉的。情况一：父组件给子组件传值方法，使用props 父页面：parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitData"></sidebar-item> 4 </div> 5 </template>

vue组件通信案例练习（包含：父子组件通信及平行组件通信）

刘大猫

04-28

1688

文章目录一、案例概述二、代码准备工作：案例1.1：父组件向子组件传值（或者叫：子组件使用父组件属性）案例1.2：子组件向父组件传值（或者叫：子组件调用父组件方法）,修改父组件属性案例1.3：父组件调用子组件方法，修改子组件属性值案例1.4：父组件直接修改子组件属性值案例2.1：平行组件之间通信：Student2组件内打印展示Student1组件传递过来的属性案例2.2：平行组件之间通信：Student2组件内调用Student1组件方法修改Student1组件属性三、html项目页面实现平行组件通信案例本.

2021-12-21 笔试题(一) 列举vue指令和用法,vue组件通信:父子组件传值

GAARA

12-20

193

1.输出国籍 2.输出程序的结果 3.设置样式 4.说出至少4种vue指令和它们的用法 5.简要写出vue组件中父组件向子组件传值和子组件向父组件传值的过程