父子组件通信传值的方式有三种:@Input,@Output,@ViewChild。按照顺序来分享各自的不同:
一:@Input方式(可以传值不传方法,父传子)
1,传值。我总结为:申明---绑定---导入(接收)---引用,前面两步是在父组件完成,后面两步是在子组件完成。
![](https://img.haomeiwen.com/i12476273/138ed3a31b953118.png)
![](https://img.haomeiwen.com/i12476273/5c9bbb97848f883b.png)
![](https://img.haomeiwen.com/i12476273/b518da3f2819e188.png)
![](https://img.haomeiwen.com/i12476273/ce872dabd3bc0f08.png)
二:@Output方式(子组件调用父组件方法,调用的时候子可以传值给父组件)
过程是:子:导入----实例化---引用——父:绑定-----有函数执行。如图:
![](https://img.haomeiwen.com/i12476273/24f61819680136b2.png)
![](https://img.haomeiwen.com/i12476273/0aa76010dbc67776.png)
![](https://img.haomeiwen.com/i12476273/f1783aeed4859b77.png)
![](https://img.haomeiwen.com/i12476273/2f87e64140fb0f65.png)
三:子传父(父组件主动获取子组件的数据和方法)
1,父组件直接调用子组件方法,非通过调用父组件自己的方法。(一般只传方法)
方法的传递过程:子组件申明方法——父组件调用子组件的过程中直接命名调用
![](https://img.haomeiwen.com/i12476273/aa19d535d84471e4.png)
![](https://img.haomeiwen.com/i12476273/7921586a61bfc659.png)
2,父组件间接调用子组件方法,通过调用父组件自己的方法来实现。(可传方法,数据)
2.1传递过程
![](https://img.haomeiwen.com/i12476273/1e5aff03132c068e.png)
![](https://img.haomeiwen.com/i12476273/90bc50a4134c8740.png)
![](https://img.haomeiwen.com/i12476273/8d86abd357c3f972.png)
网友评论