vue-vue2脚手架14-插槽(slot)

最新推荐文章于 2024-03-22 16:42:47 发布
最新推荐文章于 2024-03-22 16:42:47 发布
阅读量224 收藏
点赞数
分类专栏： # vue2脚手架 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhougubei/article/details/121492315
版权

vue-vue2脚手架14-插槽

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

  2. 分类：默认插槽、具名插槽、作用域插槽

  3. 使用方式：

    1. 默认插槽：

      父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

    2. 具名插槽：

      父组件中：
        <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>

    3. 作用域插槽：

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

      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>

默认插槽(slot)

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>

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>

具名插槽 slot(‘name’)

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>

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>

作用域插槽

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>

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>

vue目前已经弃用 slot(‘name’)这种写法

可以用 v-slof：name 或者 #name 来做替代 但是这种只能放在 template上面

具体链接：https://cn.vuejs.org/v2/guide/components-slots.html

飘然渡沧海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli4搭建脚手架.doc
01-20
vue版本脚手架的安装
vue插槽
weixin_45077672的博客
08-24 177
插槽 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。 分类：默认插槽、具名插槽、作用域插槽 使用方式： 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category> 子组件中： <template> <div>
【vue2】element-ui el-transfer扩展 实现多列效果一对多
qq_33002083的博客
02-21 2286
element-ui el-transfer扩展 实现多列效果一对多
vue2 插槽（默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 ）
最新发布
朝阳39的博客
03-22 537
插槽：用于在子组件的指定位置插入指定内容，类似在电梯里挂的若干广告显示屏，可以给指定的位置传入指定的广告。
elementUI中使用el-form-item时prop绑定多字段
heirui的专栏
09-06 6702
但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，我们人，是活的，要活学活用。上图中省市区联动，还有经纬度，都是需要在同一行内，显示多个控件，并绑定多个字段的。
el-transfer穿梭框使用（传值、清空）
coinisi_li的博客
08-18 3858
可能会遇到从后台获取的数据全部都显示在了左边框中，右边框没有数据，因为 v-model 绑定的selectedUserIds接收的是 key 的数组。有两个区域：一个是"待选用户"，另一个是"已选用户"。在组件el-transfer中有些特殊，因为他禁用的不是整个组件，而是每条数据。注意，这种索引方式依赖于子组件在模板中的位置，如果你的模板结构发生变化，这些索引可能会失效。来给子组件命名，然后通过命名来访问子组件，而不是通过索引。组件中的不同区域，每个区域可能具有不同的查询条件(代表一个Vue组件的引用。
VUE作用域插槽详解（＜slot＞、v-slot、slot-scope）
热门推荐
Don't disturb me!的博客
08-28 2万+
什么是插槽？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 如下代码： 在子组件中放一个占位符 在父组件中给这个占位符填充内容： 展示的效果: 现在来看看，如果子组件中没有放插槽，同样的父组件中在子组件中填充内容，会是啥样的： 子组件代码无插槽： 2. 父组件照常填充内容： 3. 展示的效果： 总结：如果
使用vue-cli（vue脚手架）快速搭建项目的方法
12-10
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度，介绍整个搭建的过程。 1. 避坑前言 其实这次使用vue-cli的过程并不顺利，反复尝试几次都遇到以下这个...
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
Vue-Scaffold:基于vuevue-routeraxioselement-ui的项目脚手架
05-28
:hamburger:基于 Vue / Element-UI / Axios / Vue-Router 的大中型项目脚手架 (演示项目接口数据来自RAP2，由于不支持https请求，演示项目可能无法正常登录，请自行下载代码，本地运行) 特性 成熟的基础设施 ...
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
组件作用域插槽分发，将作用域插槽从父组件传递到子组件（Select、FormSelect）
kevin_xingka的博客
11-13 722
背景 二次封装 Select 组件： src\common\components\Select\index.vue <template> <el-select ref="select" v-selectdisabled="{ multiple, options, props: curProps, attrs: curAttrs }" v-bind="curAttrs" v-on="curListeners"> <!-- 默认的e
vue 通过插槽组件之间数据传递
m0_71673753的博客
04-03 1875
【代码】vue 通过插槽传值。
vue知识（二）组件初始化、父子组件传值、插槽
weixin_65548623的博客
10-13 749
在这里插入图片描述](https://img-blog.csdnimg.cn/73a838610abf4733a05d400b1c3fda17.png。驼峰方式 MyComponent 在html中写会报错，可以在字符串中使用。自定义组件的方式不太容易（html、css、js）将一个页面拆分成多个组件，每个组件都具有不同的功能。局部组件只能在注册它的父组件中使用。父组件向子组件传递内容（模板内容）特点：可复用性、可维护、可组合。多次使用组件可能导致冲突。Vue部分实现了规范。
vue学习之父子组件及插槽
qq_32021429的博客
11-30 1405
父子组件 父子组件是组件之间的一种关系，这个关系并不是绝对的，而是相对的。通常，如果在A组件中 使用 了B组件，那么就称A组件为B组件的子组件，响应地，B组件就称为A组件的子组件。 <!-- A组件 --> <template> <div> <!-- 3、使用 --> <B></B> </div> </template> <script> /* 在工程化项目中，组件想
vue插槽(slot)的使用
fggfgf的博客
05-19 1万+
vue的slot分为三种:匿名插槽，具名插槽， 作用域插槽 作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组 件=>子组件
vue中插槽的使用
ct5211314的博客
04-21 3842
一、插槽 插槽，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父子组件（父传子），可以用于组件的二次封装。 插槽分类：默认插槽、具名插槽、作用域插槽 二、默认插槽 当父组件没有插入时，插槽显示默认内容 //父组件 <template> <div class="home"> <h1>我是父组件</h1> <HelloWorld msg="Welcome to Your Vue.j...
vue插槽传值（多个插槽和单个插槽）
ys_dd的博客
09-01 1756
vue插槽传值，多个插槽，单个插槽
什么是作用域插槽?
qq_42931285的博客
10-03 2841
什么是作用域插槽?
vue-admin-template脚手架包
08-04
关于"vue-admin-template"脚手架包，它是一个基于Vue.js和Element UI的后台管理系统脚手架，提供了一套完整的开发模板和常用的功能组件，可以快速搭建一个现代化的后台管理系统。 它具有以下特点： - 基于最新的Vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值