Vue组件传值
2019-06-12 本文已影响5人
low_4339
为什么要使用传值
![](https://img.haomeiwen.com/i17962173/5cdd93d0b0fbfc1e.png)
父传子
1.通过v-bind:将父组件的数据绑定到子组件身上
![](https://img.haomeiwen.com/i17962173/df6091215e27dce7.png)
2.把父组件传递过来的属性在props定义一下
![](https://img.haomeiwen.com/i17962173/3f7d9ff3e3bee6c7.png)
3.使用
![](https://img.haomeiwen.com/i17962173/220b7dbc17ef0769.png)
注意:子组件的data与props
![](https://img.haomeiwen.com/i17962173/2c702aaa36af9a83.png)
子传父
1.给子组件绑定一个父组件的方法
![](https://img.haomeiwen.com/i17962173/17a68664dc2a3fa6.png)
2.在子组件中创建一个自己的方法,
![](https://img.haomeiwen.com/i17962173/9e054ffecc391214.png)
3.在子组件事件中通过$emit触发父组件绑定的方法
![](https://img.haomeiwen.com/i17962173/b38a64fcbd790354.png)
4.把子组件中的数据当做参数通过事件传递给父组件
![](https://img.haomeiwen.com/i17962173/a7b22ddca165c77a.png)
5.父组件拿到数据通过事件把接收到的数据传给父组件的data
![](https://img.haomeiwen.com/i17962173/49ec08429ccdec8f.png)
事件总线(不相关组件传值)
1.定义空白实例
![](https://img.haomeiwen.com/i17962173/ed553bf5c3f92666.png)
2.在一个组件中通过$.emit派发一个事件和参数
![](https://img.haomeiwen.com/i17962173/4a3b1ecd736b93f9.png)
3.在另一个组件中通过$.on接受一个事件和参数
![](https://img.haomeiwen.com/i17962173/98c7200c3bee018a.png)