vue的父子兄弟组件传递

之前学习过vue但是跟着视频学习并没有敲代码,感觉一知半解,这里做一个总结,方便自己理解以及以后工作的开展

首先关于父子组件的传递
1.父传子

父传子(其实就是父组件用v-bind给子组件绑定数据,子组件用props接收)要注意的几个点:
1.在父组件中要包含有子组件的存在
2.在父组件部分包含的子组件需要使用v-bind来绑定上数据(否则在子组件部分值就会undefined)
3.在子组件的部分使用props来进行接收
源代码如下:
父组件:
在这里插入图片描述
子组件:
在这里插入图片描述
运行效果:
在这里插入图片描述

2.子传父

关于子传父(子组件需要设置一个触发事件来传递参数,通过 e m i t 的 方 式 , 父 组 件 在 子 标 签 上 监 听 函 数 , 来 获 取 值 ) , 需 要 注 意 的 几 点 : 1. 触 发 函 数 中 t h i s . emit的方式,父组件在子标签上监听函数,来获取值),需要注意的几点: 1.触发函数中 this. emit1.this.emit(‘乱想的名字’,‘真实参数’);
2.在父组件中的子标签中监听该函数,需要设置函数实现
源代码:
子组件:
在这里插入图片描述
父组件:

在这里插入图片描述
运行结果:
在这里插入图片描述

然后关于兄弟组件的传递
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值