Vue的学习与使用_08.插槽

1.插槽的作用

有时我们希望使用一个组件表示多个类似的部分,但是每部分都有一些不同之处,我们希望在组件中标出能够复用的部分,不同的部分在使用组件时在将内容放入组件.
在使用自定义的组件时,是使用其标签,但是在其标签中使用的内容是无法展示到页面上的,因为在浏览器解析了标签中的内容之后得到的内容不知道放在组件的哪里.因此就有了插槽,即声明了一块空地等待内容填入.

2.插槽的使用

(1)匿名插槽

在组件中使用slot标签,就指定了未定义内容放入的位置
	<slot></slot>

在使用组件时
<template>
	<组件标签>
		输入要放入插槽的内容
	</组件标签>
</template>

(2)具名插槽

因为有时我们在组件中需要不止一个插槽,此时使用slot时就不能直接放在组件标签中了,而是需要一个属性slot,slot的值与slot标签的name值相同.

在组件中使用slot标签,就指定了未定义内容放入的位置
	<slot name="插槽名1"></slot>
	...
	
在使用组件时
<template>
	<组件标签>
		<div slot="插槽名1">
		</div>
		<template slot="插槽名2">
		</template>
	</组件标签>
</template>