vue3 插槽slot

插槽是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的 元素。 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

一、匿名插槽 

子组件 FancyButton 中插槽模板

# 基础用法

	
	 


# 可指定默认插槽内容：父组件没有提供任何插槽内容时，默认渲染的插槽内容 Submit

	Submit 

父组件填充插槽内容

	
	
Click me!


# 或


	
	 

最终渲染出的 DOM 结构如下

Click me!

ps. 

通过使用插槽，使组件更加灵活和具有可复用性。这样组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。

二、具名插槽 (named slots) 

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

对于这种场景， 元素可以有一个特殊的属性 name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

子组件预留的插槽

    

    	
    
    

    	<-- 没有提供 name 的 slot 出口会隐式地命名为 “default” -->
    	
    
    

    	
    

 父组件对指定插槽进行填充

要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的