vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）

2024-03-09 阅读 965 评论 0

摘要：本文只有一个学习点。父组件如何向子组件传递数据。一起学习，更多文章请关注我的头条号，我是落笔承冰。一、先创建一张空白网页index.html，在head标签里设置好vue的链接库。二、写一个绑定元素div，一个子组件，一个父组件，父组件与元素div绑定。三、我们写子组件的模板，并在div内调用它，看

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

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

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(1)

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

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(2)

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

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(3)

你会发现网页里，空空的，什么也没有，那是因为是子组件没有在父组件里注册。
不是全局子组件，是要在父组件那里注册的。

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(4)

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

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(5)

再刷新浏览器，终于出来了。

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(6)

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

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(7)

试试效果吧

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(8)

这里就完成了父组件向子组件传递数据。

vue子数据如何传到父组件（在vue.js中父组件是如何向子组件传递数据的）(9)

<!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>  </div>  <script> var mycpn = { props: ["tocmp"], template: "<span >{{tocmp}}</span>", } // 以上是子组件 var vm = new Vue({ el: "#vmdiv", data: { vmtext: "我是父组件的消息。" }, components: { mycpn: mycpn, }, }) // 以上是父组件 </script> </body> </html>

原文链接：http://cn.tdroid.net/ce6d1Cz0DAQkHVg.html

上一篇：英语的集合名词是什么（英语中什么叫专有名词）

下一篇：蛤蜊蒸蛋怎么做能去腥（家常蛤蜊蒸蛋鲜美嫩滑）