vue与React中的组件传值

1,659 阅读1分钟

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

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