vue2.0中，实现父子组件间的传值，需要依靠一个props的属性，作为变量接收的对象。
注：vue.js文件引用的是本地的js文件，拷贝本机运行时，可以使用cnd替换。
https://www.bootcdn.cn/vue/
该网址为一个优化的 vue插件的cnd加速地址，可以使用指定版本的cdn文件来运行代码！
代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>props父子传值</title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .artLis {
width: 300px;
border: 2px solid red;
border-radius: 5px;
margin: 10px auto;
} .artLis p {
color: palevioletred;
font-family: "arial narrow";
padding-left: 5%;
} .artLis div {
text-align: right;
padding-right: 10%;
color: #008000;
}
</style>
</head> <body>
<div id="app">
<mu-ban v-for='item in atrs' :dt='item'></mu-ban>
</div>
<script type="text/javascript">
Vue.component('muBan', {
props: ['dt'],
template: `
<div class="artLis">
<hr>
<p>{{dt.title}}</p>
<div>{{dt.msg}}</div>
</div>`
}); let app = new Vue({
el: '#app',
data: {
atrs: [{
title: '星期天',
msg: '玩儿'
}, {
title: '星期一',
msg: '上学'
}, {
title: '星期二',
msg: '写作业'
}, {
title: '星期三',
msg: '练车'
}, {
title: '星期四',
msg: '考试'
}, {
title: '星期五',
msg: '等待下班'
}, {
title: '星期六',
msg: '小周末'
}, ]
}
});
</script>
</body> </html>