[JavaScript知识库]vue 插槽的用法

默认插槽

组件内定义插槽位置，就是要把插入的内容放哪里,比如定义一个组件 ：HelloWorld.vue

<div>内容</div>

<slot></slot>

<div>内容</div>

?使用组件的页面

<HelloWorld>
   <p>{{msg}}</p>
</HelloWorld>

具名插槽

顾名思义，有名字的插槽

定义：

<slot name="header"/>

使用：

<template v-slot:header>{{header}}</template>

作用域插槽

定义：

<slot name="content"? :slotProps="slotProps"></slot>

使用：

------------2.6版本前---------

<template slot="content"? :slot-scope="{ slotProps }">

? ?{{slotProps}}

</template>

------------2.6版本后-----------------

<template v-slot:slotProps="slotProps">{{slotProps}}</template>