v-slot 插槽

v-slot 插槽

匿名插槽

父组件

<Children>
	<h1>我是插槽的内容,我会传递给子组件</h1>
</Children>

子组件

<div>
<slot></slot> //使用vue内置标签slot
<slot>我是默认的内容,如果父组件没有传递参数的话,我会显示默认内容</slot> //后备内容
</div>

//当组件渲染时,h1标签中的内容会替换掉 slot标签的内容,这就是默认插槽

具名插槽

父组件

<Children>
	<template v-slot:header> 
		<h1>我是具名插槽的内容</h1>
	</template>
	<template> 
		<h1>我是插槽的内容,我会传递给子组件</h1>
	</template>
	
</Children>

子组件

<div>
<slot name='header'></slot>//具名插槽,会渲染slot为header的内容
<slot></slot>//默认值,同==><slot name='default'></slot>
</div>

作用域插槽, 传参

父组件

<Children>
	<template v-slot:default='user'> 
		<h1>{{user}}</h1>
	</template>
	
</Children>

子组件

<div>
<slot :user='user'></slot>
</div>

通过子组件身上定义自定义属性,然后父组件上用v-slot:default(具名插槽的值,不写默认为defalut)='自定义属性’来接收,达到子组件向父组件传递数据的作用;

独占默认插槽的缩写语法

父组件

<Children v-slot:default='user'>
	
		<h1>{{user}}</h1>
	
</Children>

//如果只有匿名插槽需要传参的话可以省略<template>标签
!!!不能与具名插槽混用,会导致作用域不明确

子组件

<div>
<slot :user='user'></slot>
</div>