vue 通过 Prop 向子组件传递数据的实现方法
时间：2021-07-11 08:41:33 | 栏目：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>
<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这个数组中的信息渲染到页面上给用户看。