Angular 8 学习（七进阶）组件之间的传值问题

以你之姓@ 2024-04-17 18:20 60阅读 0赞

# 一、父组件给子组件传值 #

@input

在父组件中定义要传递给子组件的数据：

![20190829193800965.png][]

父组件中在调用子组件的时候在子组件中添加要传递的数据

![20190829193816857.png][]

子组件接受参数

子组件引入

![20190829193934622.png][]

![20190829194039301.png][]

参数

![20190829194116286.png][]

方法

![20190829194126702.png][]

# 二、父组件获得子组件的数据方法（在这里介绍@viewchild） #

给组件定义别名：

![2019082919433938.png][]

引入viewchild

![20190829194413543.png][]

组件关联

![20190829194437746.png][]

调用：

![20190829194450418.png][]

[20190829193800965.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/78c575101439420f9755cd2f188437b5.png
[20190829193816857.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e0063a36bdef47f3a7d8bdffd2ea3ed1.png
[20190829193934622.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/45d29860f2f74e5981533695720975b1.png
[20190829194039301.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0ce3fbd43ddc4fc4bba1a7651babfc1b.png
[20190829194116286.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fb43bf2c938f4026bdfe255d94c865b9.png
[20190829194126702.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8e452972acaf4c05a0798162a80ea13f.png
[2019082919433938.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4b020e7831ae47bebe1179087e7c5cf3.png
[20190829194413543.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bf43c75ebd6e4efba66ef64659d5ea97.png
[20190829194437746.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/57ba027f767e41ce8f298fd475a33cdd.png
[20190829194450418.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/70668d7e1ad34bdd8f329021b69e84a2.png