网站

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后,则会将内容保存下来。
如果<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>

评论

大侠名号:   验证暗号: 点击我更换图片

继续阅读