Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】（2022/8/30）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

插槽Vue.js官网介绍：https://vuejs.org/guide/components/slots.html

会牵涉到template的用法、占位、实际不渲染到页面中

1、默认插槽：

1.1 基本结构及介绍

个人理解：在A组件中定义一个插槽（相当于一个占位符），在B组件中使用A组件，可以放入一些内容到A组件中，放置的位置就放到插槽中。将占位符的内容替换掉。（默认只有一个插槽的时候，直接放入这个插槽）

1.2 用法

      父组件中：

              <Category>

                 <div>html结构1</div>

              </Category>

      子组件中：

              <template>

                  <div>

                     <!-- 定义插槽 -->

                     <slot>插槽默认内容...</slot>

                  </div>

              </template>

1.3 实际应用

1.3.1 项目结构

1.3.2 组件Category.vue

<template>

	<div class="category">

		<h3>{{title}}分类</h3>

		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->

		<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;

	}

	video{

		width: 100%;

	}

	img{

		width: 100%;

	}

</style>

1.3.3 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="(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>

2、具名插槽：

2.1 基本结构及介绍

个人理解：当A组件中有多个插槽时，B组件中使用A组件，同时需要向A组件塞内容。应该塞到哪个插槽？？？所以给插槽命名，可以指定内容塞到哪个插槽中。

2.1 用法

     父组件中：

              <Category>

                  <template slot="center">

                    <div>html结构1</div>

                  </template>

                  <template v-slot:footer>

                     <div>html结构2</div>

                  </template>

              </Category>

      子组件中：

              <template>

                  <div>

                     <!-- 定义插槽 -->

                     <slot name="center">插槽默认内容...</slot>

                     <slot name="footer">插槽默认内容...</slot>

                  </div>

              </template>

2.3 实际应用

2.3.1 项目结构

同1.3.1

2.3.2 组件Category.vue

<template>

	<div class="category">

		<h3>{{title}}分类</h3>

		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->

		<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot>

		<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</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;

	}

	video{

		width: 100%;

	}

	img{

		width: 100%;

	}

</style>

2.3.1 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.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>

<style scoped>

	.container,.foot{

		display: flex;

		justify-content: space-around;

	}

	h4{

		text-align: center;

	}

</style>

3、作用域插槽：

3.1 基本结构及介绍

个人理解：当数据在A组件、插槽定义在A组件中。B组件则无法直接访问A组件中的信息，但是当B组件使用A组件的插槽时，A组件主动将数据交给B组件使用。

1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

3.2用法

         父组件中：

         		<Category>

         			<template scope="scopeData">

         				<!-- 生成的是ul列表 -->

         				<ul>

         					<li v-for="g in scopeData.games" :key="g">{{g}}</li>

         				</ul>

         			</template>

         		</Category>

         		<Category>

         			<template slot-scope="scopeData">

         				<!-- 生成的是h4标题 -->

         				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>

         			</template>

         		</Category>

         子组件中：

                 <template>

                     <div>

                         <slot :games="games"></slot>

                     </div>

                 </template>

                 <script>

                     export default {

                         name:'Category',

                         props:['title'],

                         //数据在子组件自身

                         data() {

                             return {

                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']

                             }

                         },

                     }

                 </script>

3.3 实际应用

3.3.1 项目结构

同1.3.1

3.3.2 组件Category.vue

<template>

	<div class="category">

		<h3>{{title}}分类</h3>

		<slot :games="games" msg="hello">我是默认的一些内容</slot>

	</div>

</template>

<script>

	export default {

		name:'Category',

		props:['title'],

		data() {

			return {

				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],

			}

		},

	}

</script>

<style scoped>

	.category{

		background-color: skyblue;

		width: 200px;

		height: 300px;

	}

	h3{

		text-align: center;

		background-color: orange;

	}

	video{

		width: 100%;

	}

	img{

		width: 100%;

	}

</style>

3.3.3 App.vue

<template>

	<div class="container">

		<Category title="游戏">

			<template scope="atguigu">

				<ul>

					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>

				</ul>

			</template>

		</Category>

		<Category title="游戏">

			<template scope="{games}">

				<ol>

					<li style="color:red" v-for="(g,index) in 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'

	export default {

		name:'App',

		components:{Category},

	}

</script>

<style scoped>

	.container,.foot{

		display: flex;

		justify-content: space-around;

	}

	h4{

		text-align: center;

	}

</style>

正文

1、默认插槽：

1.1 基本结构及介绍

1.2 用法
`父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div>  <slot>插槽默认内容...</slot> </div> </template>`

1.3 实际应用

1.3.1 项目结构

1.3.2 组件Category.vue

1.3.3 App.vue

2、具名插槽：

2.1 基本结构及介绍

2.3 实际应用

2.3.1 项目结构

2.3.2 组件Category.vue

2.3.1 App.vue

3、作用域插槽：

3.1 基本结构及介绍

3.3 实际应用

3.3.1 项目结构

3.3.2 组件Category.vue

3.3.3 App.vue

相关阅读

mongodb配置size，mongodb配置之件默认目录

javascript下拉多选框默认值，js获取下拉框被选中的值

mysql5.7日志文件，mysql默认日志路径

phpcms用户登录，phpcms默认密码

MacOS默认hosts，mac设置hosts

sqlserver存储过程修改，sql存储过程设置默认参数

cacti监控windows，cacti监控系统1231的默认密码

mysql默认数据库sys，mysql数据库默认的用户为

目录[+]

1、默认插槽：

1.1 基本结构及介绍

1.2 用法 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div>  <slot>插槽默认内容...</slot> </div> </template>

1.3 实际应用

1.3.1 项目结构

1.3.2 组件Category.vue

1.3.3 App.vue

2、具名插槽：

2.1 基本结构及介绍

2.3 实际应用

2.3.1 项目结构

2.3.2 组件Category.vue

2.3.1 App.vue

3、作用域插槽：

3.1 基本结构及介绍

3.3 实际应用

3.3.1 项目结构

3.3.2 组件Category.vue

3.3.3 App.vue

相关阅读

mongodb配置size，mongodb配置之件默认目录

javascript下拉多选框默认值，js获取下拉框被选中的值

mysql5.7日志文件，mysql默认日志路径

phpcms用户登录，phpcms默认密码

MacOS默认hosts，mac设置hosts

sqlserver存储过程修改，sql存储过程设置默认参数

cacti监控windows，cacti监控系统1231的默认密码

mysql默认数据库sys，mysql数据库默认的用户为

目录[+]

1.2 用法
`父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div>  <slot>插槽默认内容...</slot> </div> </template>`