vue组件之匿名slot 的分类案例

一、使用组件的复用完成如下分类页面效果：

利用父组件给子组件Category.vue传递数据完成不同内容的复用：

父组件App.vue示例代码：

<template>
	<div class="container">
    <!-- 步骤三：调用子组件 -->
		<Category title="美食" :listData="foods"></Category>
    <Category title="游戏" :listData="games"></Category>
    <Category title="电影" :listData="films"></Category>

	</div>
</template>

<script>
// 步骤一：引入子组件
	import Category from './components/Category'
	export default {
		name:'App',
    // 步骤二：注册子组件
		components:{Category},
		data() {
			return {
				foods:['火锅','烧烤','小龙虾','牛排'],
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
				films:['《教父》','《拆弹专家》','《你好，李焕英》','《峰爆》']
			}
		},
	}
</script>

<style scoped>
/* 让container里面的盒子水平排列并在水平轴内自动计算间隔均匀排列 */
	.container{
		display: flex;
		justify-content: space-around;
	}

</style>

子组件Category.vue示例代码：

<template>
  <div class="category">
      <h2>{{title}}分类</h2>
      <ul>
          <li v-for="(item,index) in listData" :key="index">{{item}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'Category',
    data(){
        return{

        }
    },
    props:['title','listData']

}
</script>

<style>
.category{
    width:200px;
    height: 300px;
    background: skyblue;
}
.category h2{
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: orange;
}
</style>

二、使用默认slot内容分发完成组件内相同结构的不同内容显示的页面效果：

1.在子组件Category.vue中定义一个插槽（挖个坑，等着组件的使用者进行填充）：

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

<script>
export default {
    name:'Category',
    data(){
        return{

        }
    },
    props:['title']

}
</script>

<style>
.category{
    width:200px;
    height: 300px;
    background: skyblue;
}
.category h2{
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: orange;
}
</style>

2.在父组件App.vue中调用子组件并往插槽中填充不同内容，示例代码：

<template>
	<div class="container">
    <!-- 步骤三：调用子组件,往插槽里填充自定义内容 -->
		<Category title="美食" :listData="foods">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
    </Category>
    <Category title="游戏">
      <ul>
        <li v-for="(item,index) in games" :key="index">{{item}}</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里面的盒子水平排列并在水平轴内自动计算间隔均匀排列 */
	.container{
		display: flex;
		justify-content: space-around;
	}
 video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

 思考：这里的页面效果实现只需要用到一个插槽，那如何需要用到多个插槽进行自定义内容展示页面效果呢？