vue 通過 Prop 向子組件傳遞數據的實現方法
這是一個通過 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='http://m.4tl426be.cn/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這個數組中的信息渲染到頁面上給用戶看。
到此這篇關于vue 通過 Prop 向子組件傳遞數據的實現方法的文章就介紹到這了,更多相關vue Prop子組件傳遞數據內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
相關文章：
1. php網絡安全中命令執行漏洞的產生及本質探究2. 三個不常見的 HTML5 實用新特性簡介3. Angular獲取ngIf渲染的Dom元素示例4. IIS+PHP添加對webp格式圖像的支持配置方法5. ASP調用WebService轉化成JSON數據，附json.min.asp6. 無線標記語言(WML)基礎之WMLScript 基礎第1/2頁7. 使用.net core 自帶DI框架實現延遲加載功能8. Warning: require(): open_basedir restriction in effect,目錄配置open_basedir報錯問題分析9. php測試程序運行速度和頁面執行速度的代碼10. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執行過程解析
網公網安備