Vue和React之间关于注册组件和组件间传值的区别

注册组件

Vue中:1.引入组件;2.在components中注册组件;3.使用组件;
1766962-20190814102752752-1608234730.png

1766962-20190814102823135-49153190.png

1766962-20190814102838284-860801123.png

React中:1.引入组件;2.使用组件;
1766962-20190814103035222-323920684.png

1766962-20190814103054985-486761077.png

子父传值

Vue中
父组件向子组件传值
1.在父组件中绑定值;2.子组件通过在props中接收值;3.正常使用;
1766962-20190814103350173-1595259635.png

1766962-20190814103406669-1857193278.png

1766962-20190814103517927-669298345.png

子组件向父组件传值
1.子组件通过this.$emit订阅;2.父组件通过v-on监听;
1766962-20190814104533687-76225324.png

1766962-20190814104612408-255839873.png

1766962-20190814104722442-70330967.png

React中
父组件向子组件传值
1.在父组件中直接写值;2.在子组件中通过this.props.接收值;
1766962-20190814105106311-787784254.png

1766962-20190814105230362-349802232.png

子组件向父组件传值
(方法一)
1.给子组件定义一个方法news,属性为this;2.子组件中添加一个按钮定义一个onClick事件this.props.news.getChildData就可以调用父组件的方法并使用bind绑定this和传递参数;
1766962-20190814105844948-107447339.png

1766962-20190814105924251-1631374102.png

这里父组件中的getChildData方法就可以通过形参接收参数。

(方法二)
1.给子组件定义一个值并写上方法;2.在子组件中定义一个onClick方法,在方法中通过this.props拿到子组件传过来的值,并将值传给父组件;3.在父组件中的那个方法中拿到子组件传过来的值并修改值
父组件
1766962-20190814111057913-644871097.png
子组件
1766962-20190814111217951-1362408372.png

父组件主动获取子组件的数据及方法

1.调用子组件的时候指定一个ref值
2.通过this.refs.header 获取整个子组件实例 (注意要在dom加载完成之后获取)

转载于:https://www.cnblogs.com/zppsakura/p/11350403.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值