vue三种插槽.md · 高翔/大前端

#### 插槽使用：默认插槽、具名插槽、作用域插槽（三者可相互混合使用）

### 1.默认插槽（只有一个slot插槽，且所有内容都放一个插槽的时候使用）
```

<template>
	<div class="home">
		<Category title='美食' :listData='foods'>
			<img src="http://ximacanyin.com/img/foods/f3.png">
		</Category>
		<Category title='游戏' :listData='games'>
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>
		<Category title='书籍' :listData='films'></Category>
	</div>
</template>

img {
		width: 100%;
	}
</style>

<template>
	<div class="category">
		<h3 class="title"  >{{title}}分类</h3>
		<slot>我是默认值，当使用者没有传递内容结构时，我会出现</slot>
	</div>
</template>

```

### 2.具名插槽（有多个slot插槽，且不同内容想放在不同位置的时候使用）
```

<template>
	<div class="home">
		<Category title='美食' :listData='foods'>
			<img slot='center' src="http://ximacanyin.com/img/foods/f3.png">
			<a slot='footer' href="#">更多美食</a>
		</Category>
		<Category title='游戏' :listData='games'>
			<ul slot='center'>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<template slot='footer'>
				
				<a href="#">游戏</a>
				<a href="#">游戏</a>
			</template>
		</Category>
		<Category title='书籍' :listData='films'></Category>
	</div>
</template>
```

```

<template>
	<div class="category">
		<h3 class="title"  >{{title}}分类</h3>
		<slot name="center">我是默认值，当使用者没有传递内容结构时，我会出现</slot>
		<slot name="footer">我是默认值，当使用者没有传递内容结构时，我会出现</slot>
	</div>
</template>
```

### 3.作用域插槽（数据在子组件自身，要将子组件数据给父组件，父组件需要自由生成dom结构的时候使用）
```

<template>
	<div class="home">

</div>
</template>

```

```

<template>
	<div class="category">
		<h3 class="title"  >{{title}}分类</h3>
		<slot :games= "games">我是默认值，当使用者没有传递内容结构时，我会出现</slot>
	</div>
</template>

高翔/大前端

简介

发行版

贡献者

近期动态

高翔/大前端 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

高翔/大前端