<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之父组件使用scope定义子组件模板结构</title>
<script src="vue.js"></script>
</head>
<body>
<div id="hdcms">
<hd-list :data="news">
<template scope="v">
<li>
<h1>{{v.field.title}}</h1>
</li>
</template>
</hd-list>
</div>
<script typeof="text/x-template" id="hdList">
<ul>
<slot v-for="v in data" :field="v"></slot>
</ul>
</script>
<script>
var hdList = {
template: "#hdList",
props:['data']
};
new Vue({
el: "#hdcms",
components: {hdList},
data:{
news:[
{title:'phpjava'},
{title:"课程学习"}
]
}
});
</script>
</body>
</html>