vue请求数据传给子组件_vue.js基础,父组件如何向子组件传递数据「607」

  • 本文只有一个学习点。
  • 父组件如何向子组件传递数据。
  • 一起学习,更多文章请关注我的头条号,我是落笔承冰。

一、先创建一张空白网页index.html,在head标签里设置好vue的链接库。

7bb080d0bd84b4ef1205f9ebc76162f1.png

二、写一个绑定元素div,一个子组件,一个父组件,父组件与元素div绑定。

f25e4e8ca977416174c8322b6a539d8c.png

三、我们写子组件的模板,并在div内调用它,看看是否有效果。

bc6aa454a611c7b4bf05aa4e13658348.png
  • 你会发现网页里,空空的,什么也没有,那是因为是子组件没有在父组件里注册。
  • 不是全局子组件,是要在父组件那里注册的。
893094624f02d3fa4af4132dcd83369c.png

四、那我们注册子组件吧。

fe6ff2132c3c1a1402182e46c6af916f.png
  • 再刷新浏览器,终于出来了。
009b8540b2cffba7421e274e419ce955.png

五、我们先试一下,父组件怎么把数据传给子组件。:tocmp就是父组件的要传给子组件的数据,子组件用props来接收。

2d2b0144244cf7ac03cb292067693d3b.png
  • 试试效果吧
478314abd38f40b494599b68ca3651d0.png
  • 这里就完成了父组件向子组件传递数据。
b9dc8beff5c13ec748b6438e7507e2f3.png

 Document

版权声明:本文为weixin_35835030原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。