這是一個通過 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這個陣列中的資訊渲染到頁面上給用戶看，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/195262.html
標籤：其他
上一篇：用js實作放大鏡(利用背景圖)
下一篇：html如何嵌套使用注釋