Vue2基础知识(五)插槽

  • 💌 所属专栏:【Vue2】
  • 😀 作 者:长安不及十里
  • 💻工作:目前从事电力行业开发
  • 🌈目标:全栈开发
  • 🚀 个人简介:一个正在努力学技术的Java工程师,专注基础和实战分享 ,欢迎咨询!
  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘
  • 📌 格言:把戏把戏要过手


一 插槽

1.1 如何理解插槽

  • Slot 通俗的理解就是"占坑",在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中slot位置)。
  • 并且可以作为承载分发内容的出口。
  • 简单来说就是占位符。

1.2 默认插槽

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

<script>
	export default {
    // 组件的名称
		name:'CustomSlots',
    // 组件的属性
		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>
vue 复制代码
<template>
  <div id="app">
    <CustomSlots title="美食">
      <ul>
        <li v-for="(item,index) in foods" :key="index">{{item}}</li>
      </ul>
    </CustomSlots>
    <CustomSlots title="游戏">
      <ul>
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
    </CustomSlots>
    <CustomSlots title="电影">
      <ul>
        <li v-for="(item,index) in films" :key="index">{{item}}</li>
      </ul>
    </CustomSlots>
  
  </div>
</template>

<script>

import CustomSlots from './components/CustomSlots.vue'

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


1.3 具名插槽

元素有一个特殊的 attribute:name 。通过该属性可以将内容放在指定的插槽里。

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

<script>
	export default {
		name:'NameSlots',
		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>
vue 复制代码
 <NameSlots title="美食">
      <template v-slot:footer>
        <ul>
          <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        </ul>
      </template>
      <template v-slot:center>
        <ul>
          <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        </ul>
      </template>
    </NameSlots>
  • 如果一个不带name属性的话,那么它的name默认为default
    在向具名插槽提供内容的时候,我们可以在元素上使用v-slot指令,并以参数的形式提供其名称
  • 简化写法:
vue 复制代码
 <NameSlots title="美食">
      <template #footer>
        <ul>
          <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        </ul>
      </template>
      <template #center>
        <ul>
          <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        </ul>
      </template>
    </NameSlots>

1.4 数据作用域

数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定

vue 复制代码
<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		name:'ScopeSlots',
		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>
vue 复制代码
 <ScopeSlots title="美食">
      <template scope="joney">
				<ul>
					<li v-for="(g,index) in joney.games" :key="index">{{g}}</li>
				</ul>
			</template>
    </ScopeSlots>


    <ScopeSlots title="游戏">
			<template scope="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</ScopeSlots>


		<ScopeSlots title="游戏">
			<template slot-scope="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</ScopeSlots>


    <ScopeSlots title="电影">
      <template v-slot="joney">
        <h4 v-for="(f,index) in joney.films" :key="index">{{f}}</h4>
      </template>
    </ScopeSlots>
相关推荐
AA-代码批发V哥1 小时前
HTML之语义化标签与多媒体标签
html
像风一样自由20201 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
好好研究2 小时前
学习栈和队列的插入和删除操作
数据结构·学习
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
新中地GIS开发老师3 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
SH11HF4 小时前
小菜狗的云计算之旅,学习了解rsync+sersync实现数据实时同步(详细操作步骤)
学习·云计算
Frank学习路上4 小时前
【IOS】XCode创建firstapp并运行(成为IOS开发者)
开发语言·学习·ios·cocoa·xcode
鱼樱前端5 小时前
今天介绍下最新更新的Vite7
前端·vue.js
Chef_Chen5 小时前
从0开始学习计算机视觉--Day07--神经网络
神经网络·学习·计算机视觉
炒毛豆7 小时前
vue3.4中的v-model的用法~
前端·vue.js