Vue学习（十九）插槽

最新推荐文章于 2024-01-12 15:27:40 发布

飞不起来的小菜鸟

最新推荐文章于 2024-01-12 15:27:40 发布

阅读量206

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_29107721/article/details/125475538

版权

Vue.js 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

插槽

作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于 父组件 ===> 子组件

默认组件

在子组件中只定义插槽 <slot></solt>

使用方式

// 父组件
<组件名>
    <html结构></html结构>
</组件名>
// 子组件
<template>
    <div>
        <solt>默认插槽内容</solt>
    </div>
</template>

Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <!-- <ul>
        <li v-for="(item, index) in listData" :key="index">{{item}}</li>
    </ul> -->
    <!-- 定义一个插槽 -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>
<script>
    export default {
        name: 'Category',
        props: ['title'],
    }
</script>
<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

App.vue

<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="(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.vue'
	export default {
		name: 'App',
		components: {Category},
		data() {
			return {
				foods: ['可乐', '鸡翅', '可乐鸡翅', '啤酒', '炸鸡', '小龙虾'],
				games: ['LOL', '绝地求生', '掘地求生', '和平精英'],
				films: ['《你好，李焕英》', '《阿甘正传》', '《惊奇队长》', '《普罗米修斯》', '《速度与激情》']
			}
		},
	}
</script>
<style lang="css">
	.container {
		display: flex;
		justify-content: space-around;
	}
</style>

具名插件

在子组件中定义的插槽使用name属性定义插槽的名称。父组件中指定html结构放入指定名称的插槽

使用方式

// 父组件中：
<组件名>
    <html结构 slot="插槽名称"></html结构>
</组件名>
<组件名>
    <template slot="插槽名称">
        <html结构></html结构>
    </template>
</组件名>
<组件名>
    <template v-slot:插槽名称>
        <html结构></html结构>
    </template>
</组件名>

// 子组件中
<template>
    <div>
        <solt name="插槽名称1">默认插槽内容</solt>
        <solt name="插槽名称2">默认插槽内容</solt>
    </div>
</template>

注意：
v-slot:插槽名称只能使用在```标签上

Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <!-- <ul>
        <li v-for="(item, index) in listData" :key="index">{{item}}</li>
    </ul> -->
    <!-- 定义一个插槽 -->
    <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>
<script>
    export default {
        name: 'Category',
        props: ['title'],
    }
</script>
<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    img{
        width: 100%;
    }
    video{
        width: 100%;
    }
</style>

App.vue

<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.baidu.com">更多美食</a>
		</Category>
		<Category title="游戏">
			<ul slot="center">
				<li v-for="(item, index) in games" :key="index">{{item}}</li>
			</ul>
			<div class="foot" slot="footer">
				<a  href="http://www.baidu.com">单机游戏</a>
				<a  href="http://www.baidu.com">网络游戏</a>
			</div>
		</Category>
		<Category title="电影">
			<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
			<!-- <template slot="footer">
				<div class="foot">
				<a  href="http://www.baidu.com">经典</a>
				<a  href="http://www.baidu.com">热门</a>
				<a  href="http://www.baidu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template> -->
			<template v-slot:footer>
				<div class="foot">
				<a  href="http://www.baidu.com">经典</a>
				<a  href="http://www.baidu.com">热门</a>
				<a  href="http://www.baidu.com">推荐</a>
				</div>
				<h4>欢迎前来观影</h4>
			</template>
			
		</Category>
	</div>
</template>
<script>
	import Category from './components/Category.vue'
	export default {
		name: 'App',
		components: {Category},
		data() {
			return {
				foods: ['可乐', '鸡翅', '可乐鸡翅', '啤酒', '炸鸡', '小龙虾'],
				games: ['LOL', '绝地求生', '掘地求生', '和平精英'],
				films: ['《你好，李焕英》', '《阿甘正传》', '《惊奇队长》', '《普罗米修斯》', '《速度与激情》']
			}
		},
	}
</script>
<style lang="css">
	.container, .foot {
		display: flex;
		justify-content: space-around;
	}
	h4 {
		text-align: center;
	}
</style>

作用域插槽

数据在子组件的自身，根据数据生成的结构需要子组件的使用者（父组件）决定。
作用域插槽也可以是具名插槽

使用方式

// 父组件中：
<组件名>
    <template scope="定义接收数据的名称">
        <html结构>{{定义接收数据的名称.传入数据名称}}</html结构>
    </template>
</组件名>
<组件名>
    <template slot-scope="定义接收数据的名称">
        <html结构>{{定义接收数据的名称.传入数据名称}}</html结构>
    </template>
</组件名>
<组件名>
    <template slot-scope="{传入数据名称}">
        <html结构>{{传入数据名称}}</html结构>
    </template>
</组件名>

// 子组件中
<template>
    <div>
        <solt :传出数据名称="具体定义的数据名称">默认插槽内容</solt>
    </div>
</template>
<script>
    ...
    data: {
        return {
            定义的数据
        }
    }
</script>

Category.vue

<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <!-- <ul>
        <li v-for="(item, index) in listData" :key="index">{{item}}</li>
    </ul> -->
    <!-- 定义一个插槽 -->
    <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
    export default {
        name: 'Category',
        props: ['title'],
        data() {
			return {
				games: ['LOL', '绝地求生', '掘地求生', '和平精英'],
			}
		},
    }
</script>

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

App.vue

<template>
	<div class="container">
		<Category title="游戏">
			<template slot-scope="atguigu">
				<ul>
					<li v-for="(g, index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>
		<Category title="游戏">
			<template scope="listData">
				<ol>
					<li v-for="(g, index) in listData.games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>
		<Category title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g, index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>
	</div>
</template>
<script>
	import Category from './components/Category.vue'
	export default {
		name: 'App',
		components: {Category},
		
	}
</script>
<style lang="css">
	.container, .foot {
		display: flex;
		justify-content: space-around;
	}
	h4 {
		text-align: center;
	}
</style>