- 本文只有一个学习点。
- 父组件如何向子组件传递数据。
- 一起学习，更多文章请关注我的头条号，我是落笔承冰。
一、先创建一张空白网页index.html，在head标签里设置好vue的链接库。
二、写一个绑定元素div，一个子组件，一个父组件，父组件与元素div绑定。
三、我们写子组件的模板，并在div内调用它，看看是否有效果。
- 你会发现网页里，空空的，什么也没有，那是因为是子组件没有在父组件里注册。
- 不是全局子组件，是要在父组件那里注册的。
四、那我们注册子组件吧。
- 再刷新浏览器，终于出来了。
五、我们先试一下，父组件怎么把数据传给子组件。:tocmp就是父组件的要传给子组件的数据，子组件用props来接收。
- 试试效果吧
- 这里就完成了父组件向子组件传递数据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://img.studyofnet.comhttps://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <title>Document</title> </head> <body> <div id="vmdiv"> <mycpn :tocmp="vmtext"></mycpn> <!-- tocmp是传给子组件的，vmtext是来自父组件的 --> </div> <!-- 以上是绑定的父组件元素 --> <script> var mycpn = { props: ["tocmp"], template: "<span >{{tocmp}}</span>", } // 以上是子组件 var vm = new Vue({ el: "#vmdiv", data: { vmtext: "我是父组件的消息。" }, components: { mycpn: mycpn, }, }) // 以上是父组件 </script> </body> </html>
,
