<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>组件之组件间的数据参props的使用实例操作</title>
<script src="vue.js"></script>
</head> <body>
<div id="hdcms">
<hd-news hd="hdphp" cms="cms培訓" :show-del-button="false" :news="news"></hd-news >
</div>
<script typeof="text/x-template" id="hdNews">
<div>
{{hd}}--{{showDelButton}}
<div v-for="(v,k) in news">
{{v.title}}
<button v-if="showDelButton">刪除</button>
</div>
</div>
</script>
<script>
var hdNews = {
template: "#hdNews",
props: ['hd','cms','showDelButton','news'],
data() {
return {};
}
};
new Vue({
el: "#hdcms", //根组件，其他的就是子组件
//定义局部组件：
components: {
hdNews
},
data: {
news:[
{title:'hdcms'},
{title:'hdphp'},
{title:'hdphpHtml'}
]
}
});
</script> </body> </html>