阅读 63

vue与React中的组件传值

1、首先是react中的组件传值

在父组件中给子组件传递 (数据)这样:

20211109193536.png

Childs 子组件为你要渲染或要用子组件做逻辑的内容,a={}是你要为子组件传递的属性,a是属性名,{}里写属性值,而我这里是传递的对象。

在子组件里是这样打印你传递的内容

QQ截图20211109193957.png

QQ截图20211109194008.png

现在你有这样的数据那就说明你前面写对了,开始渲染

传递20211109194244.png

99920211109194319.png

这样你可以简单的渲染传递对象而这样的方法也可以循环渲染,

循环20211109194818.png传递20211109194244.png循环.png

这样就可以简单的用父组件给子组件传递值,有父传子就有子传父,子传父的概念,自定义事件进行传递,下一篇说。

现在说Vue中的传递,父传子,子父传值,兄弟传值。

1、子传父

QQ截图20211110092821.png父组件有自己的数据点击子组件给父组件传递数据调用触发

QQ20211110093112.png

2、父传子

QQ截图20211110093423.png

QQ截图20211110093500.png在子组件中接收的是什么数据类型在props中声明数据类型

3、兄弟传值

兄弟传子是需要一个中间件的

QQ截图20211110100320.png

在两个兄弟中引入这个bus.js

QQ截图20211110100507.png在methods函数中写方法用中间件进行传递,

QQ截图20211110100634.png点击触发按钮触发方法,在另一个组件中的 mounted生命周期中触发调用修改值

QQ截图20211110101000.png

现在基础的已经讲完了,如果这篇对有用的话,点个赞吧。


作者:张三麻子
链接:https://juejin.cn/post/7028758767302869028


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐