vue slot将原标签数据同样保留下来
分类 :vue vue1 2018-03-20 人气： 次 0条评论
<div id="box">
<aaa>
<ul>
<li>111</li>
<li>222</li>
</ul>
</aaa>
</div>
<template id="aaa">
<slot>如果aaa标签里没内容就显示此处内容，否则隐藏</slot>
<p>vue</p>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
})
</script>
|
如果<aaa>标签没有内容，则显示<slot>标签中的内容，如果有内容，则<slot>标签中的内容不显示。
显示后的效果
同一样template里面含有多个slot
在标签和slot中定义相同的属性名就可以了
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>111</li>
<li>222</li>
</ul>
<ol slot="ol-slot">
<li>333</li>
<li>444</li>
</ol>
</aaa>
</div>
<template id="aaa">
<slot name="ul-slot">如果aaa标签里没内容就显示此处内容，否则隐藏</slot>
<p>vue</p>
<slot name="ol-slot"></slot>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
})
</script>
|
