<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<my-comp :students="students">
<template slot="header">
<h1>logo</h1>
</template>
<template slot="cntent" slot-scope="props">
<table border="1" style="width: 200px;">
<tr>
<td>{{props.studentinfo.id}}</td>
<td>{{props.studentinfo.name}}</td>
<td>{{props.studentinfo.age}}</td>
</tr>
</table>
</template>
<template slot="footer">
<h1>版权信息</h1>
</template>
</my-comp>
</div>
<template id="mycomp">
<div>
<slot name="header"></slot>
<slot name="cntent" v-for="student in students" :studentinfo="student"></slot>
<slot name="footer"></slot>
</div>
</template>
</body>
<script>
new Vue({
el:"#app",
data:{
students:[
{id:1,name:"丽丽",age:20},
{id:2,name:"小丽丽",age:21},
{id:3,name:"陈丽丽",age:20}
]
},
components:{
"my-comp":{
props:["students"],
template:"#mycomp"
}
}
})
</script>
</html>
Vue 插槽传值应用
最新推荐文章于 2024-05-29 17:42:35 发布