vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法
這是一個(gè)通過 Prop 向子組件傳遞數(shù)據(jù)的小例子。
代碼：
<!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'> <!--數(shù)據(jù)的渲染--> <ul><student-component v-for='item in students' :student='item'></student-component> </ul> </div> <script src='http://www.gepszalag.com/vue.js'></script> <script> //子組件 //編寫學(xué)生組件 Vue.component(’student-component’,{props:[’student’], // props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)。template:`<li> <h3>學(xué)生的姓名：{{student.name}}</h3> <h3>學(xué)生的年齡：{{student.age}}</h3> <h3>學(xué)生的興趣：{{student.hobbies}}</h3> <hr/> <br/> </li>` }) //父組件 let app = new Vue({el:’#app’,data:{ //把這些數(shù)據(jù)傳給子組件 然后渲染到頁(yè)面上 students:[ { name:’丁七歲’, age:19, hobbies:’吃飯 睡覺 打豆豆’ }, { name:’丁七歲2’, age:19, hobbies:’吃飯 睡覺 打豆豆’ }, { name:’丁七歲3’, age:19, hobbies:’吃飯 睡覺 打豆豆’ } ,{ name:’丁七歲4’, age:19, hobbies:’吃飯 睡覺 打豆豆’ } ]} }) </script> </body></html>
不再關(guān)心dom操作了 專注于數(shù)據(jù)的渲染。比如這個(gè)關(guān)注點(diǎn) 就是如何把 students這個(gè)數(shù)組中的信息渲染到頁(yè)面上給用戶看。
到此這篇關(guān)于vue 通過 Prop 向子組件傳遞數(shù)據(jù)的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue Prop子組件傳遞數(shù)據(jù)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)2. 多級(jí)聯(lián)動(dòng)下拉選擇框，動(dòng)態(tài)獲取下一級(jí)3. ASP.NET MVC實(shí)現(xiàn)樹形導(dǎo)航菜單4. 如何封裝一個(gè)Ajax函數(shù)5. Java 接口和抽象類的區(qū)別詳解6. Laravel Eloquent ORM高級(jí)部分解析7. IDEA 搭建maven 安裝、下載、配置的圖文教程詳解8. jsp response.sendRedirect()用法詳解9. Spring security 自定義過濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)10. PHP擴(kuò)展之URL編碼、解碼及解析——URLs
網(wǎng)公網(wǎng)安備