react组件传值
1、父传子:
![](https://app.yinxiang.com/shard/s24/res/1dcc4726-8b4c-4568-b158-08cb5b9dc1f4.png?search=react)
绑定自定义属性:
A、父组件传值
![](https://app.yinxiang.com/shard/s24/res/e587b70d-4358-41db-ba62-f1c8f713f1a4.png?search=react)
B:子组件接收:
![](https://app.yinxiang.com/shard/s24/res/522178cc-9e13-4198-a1bc-2f2b3a8d00dc.png?search=react)
2、子传父:
![](https://app.yinxiang.com/shard/s24/res/0d399cb8-bb72-47ec-9fa7-dd7629be2853.png?search=react)
A、子组件传值:子组件执行父组件中的函数方法
![](https://app.yinxiang.com/shard/s24/res/991c80d2-342f-402c-b79e-aeb67a2729c5.png?search=react)
B、父组件接收:父组件中定义一个自定义函数,通过这个函数接收子组件传过来的值
![](https://app.yinxiang.com/shard/s24/res/1b313fea-92ce-49a7-9d98-9cbffe4e921e.png?search=react)
3、非父子传值方式:
![](https://app.yinxiang.com/shard/s24/res/3c296052-0d2d-4674-b612-e332337b8f86.png?search=react)
发送方在通过$emit方法把值发送出去
![](https://app.yinxiang.com/shard/s24/res/1a35d5bf-668d-480e-bd04-f2189066bbec.png?search=react)
接收方要在constructor中通过$on进行接收:
![](https://app.yinxiang.com/shard/s24/res/899f9287-df6d-46e4-906d-2599cdaa4415.png?search=react)
定义外部数据类型:
![](https://app.yinxiang.com/shard/s24/res/663f49fa-f969-4b08-b5ae-01425b5e3f89.png?search=react)
![](https://app.yinxiang.com/shard/s24/res/0cda3e33-56a8-48be-ad1b-4d83acd19431.png?search=react)
定义默认的外部数据:
![](https://app.yinxiang.com/shard/s24/res/99d9c013-c5ad-4769-bb03-7b399890cb5a.png?search=react)
当没有传值时是默认值,要定义默认的类型,保证信息传递的安全性
![](https://app.yinxiang.com/shard/s24/res/b5550b21-7aec-40a7-babc-045bb778a1c9.png?search=react)
当前p标签不会显示
![](https://app.yinxiang.com/shard/s24/res/5438f42e-3e6c-4c50-b161-0db9e3682922.png?search=react)
插槽:this.props.children实现插槽
![](https://app.yinxiang.com/shard/s24/res/7fb8143a-07bb-45b4-9faf-ad8959716e2d.png?search=react)
fragment
容器组件,是react的内置组件,不会在页面上渲染,可以用来当容器组件
![](https://app.yinxiang.com/shard/s24/res/7589ab9d-ac50-449a-a436-9769a207b536.png?search=react)
Todolist
(input)
![](https://app.yinxiang.com/shard/s24/res/104629e5-a013-4f16-8aea-45d05bb59772.png?search=react)
(list)
![](https://app.yinxiang.com/shard/s24/res/eedc7a75-d277-4602-9a6c-24cfc6cacb80.png?search=react)