vue学习（六）插槽的使用_6.写一个插槽使用的案列-优快云博客

本文链接：https://blog.youkuaiyun.com/java_chegnxuyuan/article/details/94868185

插槽分为匿名插槽和实名插槽。匿名插槽就可以随便插入内容。实名插槽必须按照一定的规则插入内容

匿名插槽

<div id="app">
			<my-slot>
				<img src="img/aa.png"/>				
			</my-slot>
		</div>
		
		<template id="slot">
			<div>
				<h2>插槽的头部</h2>
				<slot>如果没有内容则显示默认的提示文字</slot>
				<h2>插槽的尾部</h2>
			</div>
		</template>
		
		<script>
			Vue.component('my-slot',{
				template:"#slot"
			})
			
			new Vue({
				el:"#app"
			})
		</script>

在<my-slot>标签中你可以随便插入内容。如果没有内容则直接显示提示的文字。

重点是给slot加一个name属性。

<body>
		<div id="app">
			<my-comouted>
				<div slot="cpu">
					Inter
				</div>		
				<div slot="memory">内存条</div>
			</my-comouted>
		</div>
		
		<template id="my_comouted">
			<div>
				<slot name="cpu">这里是插CPU</slot>
				<slot name="gpu">这里是插GPU</slot>
				<slot name="memory">这里是插内存条</slot>
				<slot name="hard-drive">这里是插硬盘</slot>
			</div>
		</template>
		
		<script>
			Vue.component('my-comouted',{
				template:"#my_comouted"
			})
			
			new Vue({
				el:"#app"
			})
		</script>
	</body>