<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot作用域插槽列表组件</title>
</head>
<body>
<h2>slot作用域插槽</h2>
<div id="app">
<my-component :items="myItems">
<template slot="it1" scope="props">
<li>{
{props.username}}--{
{props.text}}</li>
</template>
</my-component>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component(my-component,{
props:["items"],
template:`
<ul>
<hr>
<slot name="it1" v-for="item in items" :username="item.username" :text="item.text"></slot>
<hr>
</ul>
`,
created:function () {
console.log(this.items);
}
});
let vm = new Vue({
el:#app,
data:{
myItems:[
{
username:张三,
text:金榜题名
},
{
username:李四,
text:金榜题名
},
{
username:王五,
text:金榜题名
},
]
}
})
</script>
</body>
</html>
