vue slot

<!DOCTYPE html>
<html>
<head>
<title>slot</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
</div>

<template id="aaa">
<h3>welcome vue</h3>
<slot name="ul-slot"></slot>
<h3>welcome sungang</h3>
<slot name="ol-slot"></slot>
</template>

<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{},
components:{
'aaa':{
template:'#aaa'
}
}
})
</script>
</body>
</html>

posted @ 2017-05-22 16:33  sungang  阅读(159)  评论(0)    收藏  举报