vue父子组件传值与兄弟传值的注意点及爷孙传值

本文详细讲解了Vue中父组件如何操作子组件DOM,以及父子组件之间的数据双向绑定、修改与同步。还介绍了使用.eventbus实现兄弟组件间通信的方法,以及动态数据传递的注意事项。

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

父传子:

 子接收并使用:

 子改父:

在父组件操作子组件的dom元素

第一步:

 第二步:

 vm是vue的实例化对象

 使用.sync语法糖的形式 子组件改变父组件传过来的值:

也可以传入对象:

 利用事件总线方式实现兄弟组件传值:

第一步:

在main.js上new 出一个新的vue实例化对象,挂载到当前使用的vue的原型上并起个属性名叫$bus,见下图

 第二步:

 

 第三步:

 总体来看步骤:

 注意点:组件加载顺序,注意这里是两个组件都在mounted里面触发方法的

在app.vue中组件的加载是异步的:

 $refs用法 

基本传值方式如图:

 特点:

可以父传子 也可以爷爷传孙子  可以向下传递

不可以兄弟之间传值,兄弟传值建议使用事件总线的方式

下面是孩子向父亲传值,显示失败

 

 如果父级组件的值是动态从接口中获取的

需要把provide改成函数的形式,数据以函数的形式返回,如图:

 

 

在Uniapp中,父组件向子组件可以通过props属性来实现。首先,在父组件中引入子组件并注册,然后在子组件标签中使用数据绑定的形式将递给子组件的props属性。例如:[2] 在父组件中,通过import语句引入子组件,并在components中进行注册。然后,在子组件的标签中使用:data-binding的形式将父组件的递给子组件的props属性。例如:<zi :userInfo="张三"></zi> 在子组件中,使用props来接收父组件过来的。通过在子组件的props中声明需要接收的属性名,例如:props:['userInfo']。在子组件的模板中,可以直接使用这个属性。例如:{{userInfo}}。 另外,如果需要子组件向父组件,可以使用事件机制。子组件通过$emit方法触发一个事件,并递需要递的。父组件在子组件标签上监听这个事件,并定义一个方法来接收子组件过来的。例如: 在子组件中,可以在需要的地方使用@click事件触发一个事件,并通过this.$emit方法向父组件。例如:this.$emit("sendData", "我是子") 在父组件中,通过@事件名来监听子组件触发的事件,并在methods中定义一个方法来接收子组件过来的。例如:@sendData="getData" 通过以上方法,就可以在Uniapp中实现父组件向子组件以及子组件向父组件的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)](https://download.csdn.net/download/weixin_38736760/13128096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp父子组件之间](https://blog.csdn.net/weixin_43167546/article/details/107362671)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值