默认插槽
基本写法
<template>
<div class="container">
<!--
<!-- 基本写法 -->
<category>
我是插入的内容
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot>我是基本内容</slot>
</div>
</template>
v-slot
<template>
<div class="container">
<!--
<category>
<template v-slot:default>我是插入的内容</template>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot>我是基本内容</slot>
</div>
</template>
具名插槽
基本写法
<template>
<div class="container">
<!-- 具名插槽 -->
<category>
<div slot="cate">
<h1>我是插入的内容</h1>
</div>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot name="cate">我是基本内容</slot>
</div>
</template>
v-slot
<template>
<div class="container">
<!-- 具名插槽 -->
<category>
<template v-slot:cate>
<h1>我是插入的内容</h1>
</template>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot name="cate">我是基本内容</slot>
</div>
</template>
作用域插槽
基本写法
<template>
<div class="container">
<!-- 作用域插槽 -->
<category>
<!-- <template scope="prop">
{{prop}}
</template> -->
<!-- 或者 -->
<template slot-scope="prop">
{{prop}}
</template>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot :prop="games">我是基本内容</slot>
</div>
</template>
默认插槽使用v-slot
<template>
<div class="container">
<!-- 作用域插槽 -->
<category>
<template v-slot="prop">
{{prop}}
</template>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot :prop="games">我是基本内容</slot>
</div>
</template>
具名插槽使用v-slot
<template>
<div class="container">
<!-- 作用域插槽 -->
<category>
<template v-slot:cart="prop">
{{prop}}
</template>
</category>
</div>
</template>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot name="cart" :prop="games">我是基本内容</slot>
</div>
</template>