码迷,mamicode.com
首页 > 其他好文 > 详细

vue和react之间关于注册组件和组件间传值的区别

时间:2019-08-14 11:04:06      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:关于   getchild   head   完成   cli   定义   获取   传值   bin   

注册组件

Vue中:1.引入组件;2.在components中注册组件;3.使用组件;
技术图片

技术图片

技术图片

React中:1.引入组件;2.使用组件;
技术图片

技术图片

子父传值

Vue中
父组件向子组件传值
1.在父组件中绑定值;2.子组件通过在props中接收值;3.正常使用;
技术图片

技术图片

技术图片

子组件向父组件传值
1.子组件通过this.$emit订阅;2.父组件通过v-on监听;
技术图片

技术图片

技术图片

React中
父组件向子组件传值
1.在父组件中直接写值;2.在子组件中通过this.props.接收值;
技术图片

技术图片

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

技术图片

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

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

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

vue和react之间关于注册组件和组件间传值的区别

标签:关于   getchild   head   完成   cli   定义   获取   传值   bin   

原文地址:https://www.cnblogs.com/zppsakura/p/11350403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!