Vue插槽笔记

插槽有三类：默认插槽，具名插槽，作用域插槽

使用方式：

1.默认插槽：

父组件中：

<template>
  <div id="app">
    <classification title="电影">
		<p>这是电影</p>
	</classification>
	<classification title="电视剧">
	</classification>
  </div>
</template>

子组件classification中：

<template>
	<div>
		{{title}}
		<slot></slot>
	</div>
</template>

第一个classificaton里有结构，<slot></slot>标签位置显示的内容是<p>这是电影</p>

2.具名插槽：

父组件中：

<template>
  <div id="app">
    <classification title="电影">
		<template slot="slot1">
			<p>这是电影</p>
		</template>
		<template v-slot:slot2>
			<p>更多</p>
		</template>
	</classification>
	<classification title="电视剧">
	</classification>
  </div>
</template>

classification中：

<template>
	<div>
		{{title}}
		<slot name="slot1"></slot>
		<slot name="slot2"></slot>
	</div>
</template>

根据插槽的名字对应显示内容

3.作用域插槽：数据在classification中，但数据生成的结构需要由父组件决定

在父组件中：

<template>
  <div id="app">
    <classification title="电影">
		<template scope ="getdata">
			<ul>
				<li v-for="item,index in getdata.film" :key="index">{{item}}</li>
			</ul>
		</template>
	</classification>
	<classification title="电影">
		<template slot-scope ="{film}">
			<ol>
				<li v-for="item,index in film" :key="index">{{item}}</li>
			</ol>
		</template>
	</classification>
  </div>
</template>

在子组件中：

<template>
	<div>
		{{title}}
		<slot :film=film></slot>
	</div>
</template>

<script>
	export default{
		props:['title'],
		data(){
			return {
				film:['长津湖','爱情神话']
			}
		}
	}
</script>