vue组件学习三(插槽)

1、匿名插槽

父组件调用Mycomponet1组件

<Mycomponet1>
	click me
</Mycomponet1>

子组件为

<button>
	<slot></slot>
</button>

最后结果为

<button>click me</button>

2、渲染作用域

因为插槽的内容是在父组件中定义的，所以能访问到父组件中的数据作用域，无法访问到子组件的数据。

3、默认内容

在我们没有从父组件中提供插槽内容时，可以提供一个默认值
例如：

<button>
	<slot>默认内容</slot>
</button>

在这个例子中，父组件没有提供插槽内容而使用默认内容，最后结果为

<button>
	默认内容
</button>

4、具名插槽

当具有多个slot的时候，需要给每个slot加上一个名字，来指定插槽的内容放到哪个位置，
在slot有一个属性name,可以用来绑定名字
例如：

<div>
	<header>
		<slot name="header"></slot>
	</header>
	<main>
		<slot></slot>
	</main>
	<footer>
		<slot name="footer"></slot>
	</footer>
</div>

这种带名字的slot就是具名插槽，没有指定名字的会默认给name=“default”
当父组件传入插槽内容就应该通过v-slot来绑定具体的名字

<childComponent>
	<template v-slot:header>
		header插槽的内容
	</template>
</childComponent>

简写为

<childComponent>
	<template #header>
		header插槽的内容
	</template>
</childComponent>

完整的为

<childComponent>
	<template #header>
		header插槽的内容
	</template>
	<template #default>
		main插槽的内容
	</template>
	<template #footer>
		footer插槽的内容
	</template>
</childComponent>

当具名插槽和默认插槽一起使用时，顶级的非template都会被视为默认插槽的内容，
所以还可简写为

<childComponent>
	<template #header>
		header插槽的内容
	</template>
	
	main插槽的内容
	
	<template #footer>
		footer插槽的内容
	</template>
</childComponent>

5、条件插槽

配合$slots和v-if来使用
当某个插槽存在时才渲染

<div v-if="$slots.header">
	<slot name="header"/>
</div>

6、作用域插槽

在第二点我们提到作用域的问题，无法访问到子组件的数据。
但是当我们的插槽内容确实要同时用药父子组件的数据，还是可以通过props的方法传值
父组件

<childComponent v-slot="slotProps">
	{{slotProps.text}}
</childComponent>

子组件为

<script>
	export default{
		data(){
			return {
				text:'name'
			}
		}
	}
</script>
<div>
	<slot :text="text"></slot>
</div>

7、具名作用域插槽

其实就是比作用域插槽多了一个指定name的操作
注意slot上的name是一个特别保留的attributes，不会放在props中传递

<childComponent>
	<template v-slot:header="headerProp">
		{{headerProp}}
	</template>
</childComponent>

子组件为

<div>
	<slot :name="header" :text="111"></slot>
</div>

最后headerProp的值为text=“111”

最后

如果你对本文有疑问，你可以在文章下方对我留言，敬请指正，对于每个留言我都会认真查看。