您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
vue 通过 Prop 实现向子组件传递数据?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; text-decoration: none; } </style> </head> <body> <div id="app"> <!--数据的渲染--> <ul> <student-component v-for="item in students" :student="item"></student-component> </ul> </div> <script src="../vue.js"></script> <script> //子组件 //编写学生组件 Vue.component('student-component',{ props:['student'], // props 可以是数组或对象,用于接收来自父组件的数据。 template:`<li> <h4>学生的姓名:{{student.name}}</h4> <h4>学生的年龄:{{student.age}}</h4> <h4>学生的兴趣:{{student.hobbies}}</h4> <hr/> <br/> </li>` }) //父组件 let app = new Vue({ el:'#app', data:{ //把这些数据传给子组件 然后渲染到页面上 students:[ { name:'丁七岁', age:19, hobbies:'吃饭 睡觉 打豆豆' }, { name:'丁七岁2', age:19, hobbies:'吃饭 睡觉 打豆豆' }, { name:'丁七岁3', age:19, hobbies:'吃饭 睡觉 打豆豆' } ,{ name:'丁七岁4', age:19, hobbies:'吃饭 睡觉 打豆豆' } ] } }) </script> </body> </html>
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。