vue插槽-slot(学习笔记)

分为默认插槽，具名插槽，作用域插槽，动态插槽，

1.默认：在子组件内声明<slot>内容xxx</slot>，

随后在父组件

<child>123123123

<h2>我是插槽占位啊</h2>

</child>

屏幕上就会显示 “我是插槽占位啊”

注：若删除<h2>标签则屏幕不显示内容

2.具名插槽 v-slot,#name增加了索引name关系在子组件内声明

<slot name =’first’></slot>，

随后在父组件

<child>123123123

<template v-slot:first>我是插槽占位啊</template>

</child>

屏幕上就会显示 “我是插槽占位啊”

3.作用域插槽 子组件通过自定义bind属性绑定data内的变量属性，

<slot name=’helloWorld’ v-bind:users=”user”>

</slot>

父组件

<template v-slot:helloWorld=”slotProps”>

<h1>{{slotProps.users.name}}</h1>

</template>