组件之间的关系
1.父子关系
2.兄弟关系
父组件向子组件共享数据
父组件向子组件共享数据需要使用自定义属性
通过props(props不可修改)
子组件中定义props属性
子组件向父组件共享数据
子组件向父组件共享数据需要使用自定义事件
子组件:
![在这里插入图片描述](https://img-blog.csdnimg.cn/c998fc09a01747bab9e4d8a9f2aa080e.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/da5effb90e1a4dfeb38f81b9a274f5cb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pWi5pWi5rKh5pyJ,size_18,color_FFFFFF,t_70,g_se,x_16#pic_center)
父组件:
![在这里插入图片描述](https://img-blog.csdnimg.cn/27d8bb52e6a046b080ff10fee598933c.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/722a0dca734d4bf4add59900a57b42de.png#pic_center)
numchange为子组件的自定义事件 通过v-on(@)来绑定
![在这里插入图片描述](https://img-blog.csdnimg.cn/4adaf44f41c14e32a2a22bb07018b2a1.png#pic_center)
兄弟组件之间共享数据
在vue2.x中,兄弟组件之间数据共享的方案是EventBus
1.创建eventBus.js组件作为中间方
![在这里插入图片描述](https://img-blog.csdnimg.cn/84a21b481b8d42af839b8aa0a696f86e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pWi5pWi5rKh5pyJ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
兄弟组件A(数据发送方)
![在这里插入图片描述](https://img-blog.csdnimg.cn/c470ecf3af91414282b6f08510be57ff.png#pic_center)
兄弟组件C(数据接收方)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e000957523624212acb87707c95961cb.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pWi5pWi5rKh5pyJ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)