vue 插槽

一.默认插槽

一). 自定义模板Category 中<slot>

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

二). 使用插槽, 用组件名包裹 插槽的内容

<template>
	<div class="container">
		<Category title="美食" >
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

 二 .具名插槽

就是 在slot标签, 增加一个name

一). 自定义模板Category 中<slot>

<template>
	<div>
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>
		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

二) 使用插槽时也加上    slot="'"

<template>
	<div class="container">
		<Category title="美食" >
			<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
			<a slot="footer" href="http://www.atguigu.com">更多美食</a>
		</Category>

		<Category title="游戏" >
			<ul slot="center">
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a href="http://www.atguigu.com">单机游戏</a>
				<a href="http://www.atguigu.com">网络游戏</a>
			</div>
		</Category>

		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<template v-slot:footer>
				<div class="foot">
					<a href="http://www.atguigu.com">经典</a>
					<a href="http://www.atguigu.com">热门</a>
					<a href="http://www.atguigu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《尚硅谷》']
			}
		},
	}
</script>

三. 作用域插槽

重点, 父组件中：定义 html 结构。数据不在父组件上,父组件只占位, 具体数据由子组件传递

实例：对游戏数据的三种呈现（有序、无序和h4大小）

Category.vue（子组件）

1. 使用插槽，呈现父组件中的内容
2. 数据放入了子组件中

单项数据绑定 games

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "myCategory",
  props: ["title"],
  data() {
    return {
      games: ["王者荣耀", "侠盗飞车", "超级玛丽"],
    };
  },
};
</script>

<style scoped>
.category {
  background-color: skyblue;
  height: 300px;
  width: 200px;
}
h3 {
  text-align: center;
  background-color: orange;
}
img {
  width: 100%;
}
</style>

App.vue（父组件）-接受数据有3种方式

常规写法：先 scope="demo"，再 demo.games
ES6+另一种常规写法写法：先 slot-scope="{games}"，直接解构 games
ES6+新命名方式：v-slot="games"，直接解构 games
3可以简写为：#:{games}, 
 

<template>
  <div class="container">
    <Category title="游戏">
      <template scope="demo">
        <ul>
          <li v-for="(g, index) in demo.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>
    
    <Category title="游戏">
      <template slot-scope="{games}">
        <ol>
          <li v-for="(g, index) in games" :key="index">{{ g }}</li>
        </ol>
      </template>
    </Category> 
    
    <Category title="游戏">
      <template v-slot="{games}">
        <h4><li v-for="(g, index) in games" :key="index">{{ g }}</li></h4>
      </template>
    </Category>
  </div>
</template>

<script>
// 引入组件
import Category from "./components/Category.vue";
export default {
  name: "App",
  components: { Category },
};
</script>

<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
video {
  width: 100%;
}
h4 {
  text-align: center;
}
</style>