本节主要介绍一下 v-slot 插槽指令,以及插槽相关内容
1、定义:
子组件给父组件提供使用的一个位置,使用<slot></slot>
表示,父组件可以在这个位置填充任何代码;
2、默认插槽
匿名插槽:会自定渲染一个 #default插槽,将没有声明的名称的内容,放入default中
<template>
<!-- 子组件 --><div class="child"><h2>子组件</h2><slot>默认内容</slot> // 内容会渲染到slot中</div>
</template>
<!-- 父组件 -->
<template><div class="par"><h3>父组件</h3><Child>匿名插槽,内容将会渲染到子组件的slot中</Child> // 此处无内容时,会渲染子组件中的默认内容;</div>
</template>
如图:
可以看到父组件下的 Child
中的内容会自动渲染到 子组件中的slot
中;
如果父组件中的Child
中没有内容,则会自动渲染子组件中 slot
中的默认内容;如果父组件中的Child
中有内容,则会替代子组件 slot
中的默认内容;
3、具名插槽
具名插槽就是为要渲染的内容指定一个位置,让其待着指定的位置;父组件会根据具名插槽的(slot="header" 或者 #header)
会渲染到子组件中相同名称的插槽中;
具名插槽可以有多个不同名称的插槽,而匿名插槽只能有一个,同时,在父组件中没有声明的插槽内容都会渲染到子组件的匿名插槽中;
<template>
<div class="par"><h3>父组件</h3><!-- <Child ><template #:header>父组件渲染的具名插槽</template></Child> --><Child ><template v-slot:header>父组件渲染的具名插槽</template></Child> // #header表示具名插槽的名字 简写方式</div>
</template>
<script setup>
import Child from './components/childSlot.vue'
</script>
<template><!-- 子组件 --><div class="child"><h2>具名插槽</h2><slot name="header"></slot></div></template>
4、动态插槽
动态插槽名就是插槽名变成了变量的形式,我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]
或者缩写为#[变量名]
。
<template><div class="par"><h3>父组件</h3><Child ><template v-slot:[slotName]>动态插槽</template></Child> </div></template><script setup>import Child from './components/childSlot.vue'const slotName = ref('foot') // 声明动态插槽名称为 子组件的插槽名渲染到foot插槽名中;</script>
5、作用域插槽
作用域插槽就是父组件进行增删改查操作,向子组件传递数据;同时子组件通过插槽获取数据,同时子组件可以修改数据,然后再通过插槽返回给父组件;
<template><!-- 子组件 --><div class="child"><h2>子组件</h2><h2>作用域插槽</h2><slot text="作用域插槽2222" ></slot><slot text="具名插槽作用域" name="foot2"></slot></div></template>
<template><div class="par"><h3>父组件</h3><Child v-slot="{text}">{{text}} // 作用域插槽,渲染出来的内容是:“作用域插槽2222”</Child> <Child ><!-- 具名插槽 作用域 --><Child ><template #foot2="foot2Props">{{foot2Props.text}} // 作用域插槽,渲染出来的内容是:“具名插槽作用域”</template></Child> </div></template>