1.子组件使用父组件的值或数据
结构如图:
做为父组件的index.vue
![](https://img.haomeiwen.com/i10873852/dac4f15006d4abfc.png)
![](https://img.haomeiwen.com/i10873852/131c2d9fd9c53bab.png)
做为子组件在父组件当中使用的组件one和two
![](https://img.haomeiwen.com/i10873852/e0fecc3087c6a39e.png)
![](https://img.haomeiwen.com/i10873852/405748aca7508b65.png)
2.父组件使用子组件当中的数据或者值
父组件index.vue
![](https://img.haomeiwen.com/i10873852/13e595247388778d.png)
![](https://img.haomeiwen.com/i10873852/4e2fe8bbf7b8bdb7.png)
为父组件供值的同时也做为父组件中子组件的组件three
![](https://img.haomeiwen.com/i10873852/21299511e5015826.png)
3.兄弟组件之间的传值,three和four两个非父子组件之间的传值
![](https://img.haomeiwen.com/i10873852/c0103c4ed7e2c90d.png)
![](https://img.haomeiwen.com/i10873852/e2cb6c569b308a02.png)
兄弟组件之间数据的传递如果不使用vuex的话,那么可以使用bus来传值,所以在这里在需要互相通信的兄弟组件之间引入了Bus(一个js);
Bus.js
![](https://img.haomeiwen.com/i10873852/70bca7628dd5d8d3.png)
整个项目的框架结构
![](https://img.haomeiwen.com/i10873852/0c831aac5a59b1f0.png)
网友评论