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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
