父传子步骤
使用v-bind在绑定需要传递的数值【在父组件中使用子组件标签】
子组件中使用props接收数据
父传子坑
props接收数据问题
接收数据的写法
![](https://img-blog.csdnimg.cn/img_convert/3b3ae55c6230131dde8aa22c8b6445ac.png)
![](https://img-blog.csdnimg.cn/img_convert/8d753281da40d3d47b1ef5b3d2a282b6.png)
![](https://img-blog.csdnimg.cn/img_convert/7aee8a4f9bd9890e760de20eada9513d.png)
子传父步骤
子传父说简单点就是自定义事件
步骤
父组件自定义事件,事件名称,事件方法
![](https://img-blog.csdnimg.cn/img_convert/3669137f26aceec74e9cdcdd08135517.png)
![](https://img-blog.csdnimg.cn/img_convert/e8216ecc778b0ff045bfac79c6448a7b.png)
子组件通过$emit触发事件,$emit()方法中写入自定义事件名与所传参数
![](https://img-blog.csdnimg.cn/img_convert/602a21a5e586aa296aa5b8ee5bfa8680.png)
子传父坑
巨坑
在父组件中自定义事件,自定义了事件名称与事件方法,注意事件方法一定要写,用来接收子组件传过来的参数,若不写,可能会报错
报错案例 自定义事件为定义
![](https://img-blog.csdnimg.cn/img_convert/3db39d8084791daa16f19951ef568f50.png)
兄弟之间互传
步骤
借助bus
![](https://img-blog.csdnimg.cn/img_convert/c8a6831d63c0f39d96e449df055f64fb.png)
兄弟一号传参给兄弟二号,使用$emit(‘事件名称’,this.参数)
![](https://img-blog.csdnimg.cn/img_convert/4a654bb24b4c67164ca25838abbe7e08.png)
二号接收 $on(‘事件名称’,箭头函数接收数据)
![](https://img-blog.csdnimg.cn/img_convert/594445112a3226d915f7bd2cfe6a7f48.png)
兄弟之间互传坑
使用$emit(传输数据)与$on(接收数据)时注意:事件名称:事件名称两者相同,$on :中接收数据使用箭头函数。
若不写箭头函数,数据显示不成功,若名称不同,数据传输失败,控制台无报错