这是一个通过 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这个数组中的信息渲染到页面上给用户看。
