vue 通过 Prop 向子组件传递数据的实现方法

时间：2021-05-26

这是一个通过 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> <h3>学生的姓名：{{student.name}}</h3> <h3>学生的年龄：{{student.age}}</h3> <h3>学生的兴趣：{{student.hobbies}}</h3> <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>

不再关心dom操作了 专注于数据的渲染。比如这个关注点 就是如何把 students这个数组中的信息渲染到页面上给用户看。

到此这篇关于vue 通过 Prop 向子组件传递数据的实现方法的文章就介绍到这了,更多相关vue Prop子组件传递数据内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章