vue2.0中，实现父子组件间的传值，需要依靠一个props的属性，作为变量接收的对象。
注：vue.js文件引用的是本地的js文件，拷贝本机运行时，可以使用cnd替换。
https://www.bootcdn.cn/vue/
该网址为一个优化的 vue插件的cnd加速地址，可以使用指定版本的cdn文件来运行代码！
代码如下：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <title>props父子传值</title> 8 <script src="vue.min.js" type="text/javascript" charset="utf-8"></script> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 .artLis { 16 300px; 17 border: 2px solid red; 18 border-radius: 5px; 19 margin: 10px auto; 20 } 21 22 .artLis p { 23 color: palevioletred; 24 font-family: "arial narrow"; 25 padding-left: 5%; 26 } 27 28 .artLis div { 29 text-align: right; 30 padding-right: 10%; 31 color: #008000; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div id="app"> 38 <mu-ban v-for='item in atrs' :dt='item'></mu-ban> 39 </div> 40 <script type="text/javascript"> 41 Vue.component('muBan', { 42 props: ['dt'], 43 template: ` 44 <div class="artLis"> 45 <hr> 46 <p>{{dt.title}}</p> 47 <div>{{dt.msg}}</div> 48 </div>` 49 }); 50 51 let app = new Vue({ 52 el: '#app', 53 data: { 54 atrs: [{ 55 title: '星期天', 56 msg: '玩儿' 57 }, { 58 title: '星期一', 59 msg: '上学' 60 }, { 61 title: '星期二', 62 msg: '写作业' 63 }, { 64 title: '星期三', 65 msg: '练车' 66 }, { 67 title: '星期四', 68 msg: '考试' 69 }, { 70 title: '星期五', 71 msg: '等待下班' 72 }, { 73 title: '星期六', 74 msg: '小周末' 75 }, ] 76 } 77 }); 78 </script> 79 </body> 80 81 </html>
