初学Vue

文章目录

初学Vue

插槽

1、作用

2、分类和使用方式

4、样例

默认插槽

具名插槽

作用域插槽

插槽

1、作用

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

2、分类和使用方式

默认插槽

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

具名插槽：

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

作用域插槽
1、数据在组件自身¹，但根据数据生成的结构需要组件的使用者来决定。
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>

4、样例

例如，我们向下面图示中文字部分的内容通过插槽用图片和视频代替。

默认插槽

默认插槽相当于挖一个没有名字的坑（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 src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video></Category></div>
</template><script>
import Category from "./components/Category.vue";export default {name: "App",components: { Category },data() {return {foods: ["火锅", "烤全羊", "小龙虾", "手抓饭"],games: ["守望先锋", "英雄联盟", "我的世界", "魔兽"],films: ["阿凡达", "复仇者联盟", "侏罗纪世界", "魔兽世界"],};},
};
</script><style lang="css">
.container {display: flex;justify-content: space-around;
}img {width: 100%;
}video {width: 100%;
}
</style>

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><slot></slot></div>
</template><script>
export default {name:"Category",props:['title']
}
</script><style>.category{width: 200px;height:300px;background-color: skyblue;}h3{background-color: orange;text-align: center;}
</style>

效果图如下：

具名插槽

具名插槽相当于挖一个坑，但你可以给这个坑起名字，并且用和这个坑名字相同的内容来填坑。这样名字不同就意味着可以有很多个坑。

App.vue

<template><div class="container"><Category title="食物"><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /><div slot="footer" class="foods"><a href="#">更多美食</a></div></Category><Category title="游戏"><ul slot="center"><li v-for="(g, index) in games" :key="index">{{ g }}</li></ul><div class="otherGames" slot="footer"><a href="#">单机游戏</a><a href="#">网络游戏</a></div></Category><Category title="电影"><video slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video><div slot="footer" class="filmsTypes"><a href="#">喜剧</a><a href="#">科幻</a><a href="#">惊悚</a></div></Category></div>
</template><script>
import Category from "./components/Category.vue";export default {name: "App",components: { Category },data() {return {foods: ["火锅", "烤全羊", "小龙虾", "手抓饭"],games: ["守望先锋", "英雄联盟", "我的世界", "魔兽"],films: ["阿凡达", "复仇者联盟", "侏罗纪世界", "魔兽世界"],};},
};
</script><style lang="css">
.container {display: flex;justify-content: space-around;
}img {width: 100%;
}video {width: 100%;
}.foods{text-align: center;
}.otherGames{display: flex;justify-content: space-around;
}.filmsTypes{text-align: center;display: flex;justify-content: space-around;
}
</style>

Category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- slot标签中可以添加内容，表示默认值 --><slot name="center">中间部分</slot><slot name="footer">底部部分</slot></div>
</template><script>
export default {name:"Category",props:['title']
}
</script><style>.category{width: 200px;height:300px;background-color: skyblue;}h3{background-color: orange;text-align: center;}
</style>

效果图如下：

作用域插槽

App.vue

<template><div class="container"><Category title="游戏"><template scope="recieveDatas"><!-- {{recieveDatas.games}} --><!--recieveDatas是一个对象,games是其下的一个内容--><ul slot="center"><li v-for="(g, index) in recieveDatas.games" :key="index">{{ g }}</li></ul></template></Category><Category title="游戏"><template slot-scope="recieveDatas"><ol slot="center"><li v-for="(g, index) in recieveDatas.games" :key="index">{{ g }}</li></ol></template></Category><Category title="游戏"><template  slot-scope="recieveDatas"><h4 v-for="(g, index) in recieveDatas.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 {display: flex;justify-content: space-around;
}
</style>

Category.vue

<template><div class="category"><h3>{{ title }}分类</h3><!-- slot标签中可以添加内容，表示默认值 --><slot :games="games">中间部分</slot></div>
</template><script>
export default {name: "Category",props: ["title"],data() {return {games: ["守望先锋", "英雄联盟", "我的世界", "魔兽"]};},
};
</script><style>
.category {width: 200px;height: 300px;background-color: skyblue;
}h3 {background-color: orange;text-align: center;
}
</style>

效果图如下：

补充：
（1）和其他两种插槽方式相比，作用域插槽逻辑性更强。
（2）且就像其名一样，只在作用域范围内数据生效，这个作用域范围指的是你数据定义在哪个组件，那么你就只能在哪个组件上使用该数据。
（3）但有一种方式，即在<slot :xxxx="xxxx">中间部分</slot>标签上将数据类似props一样传输，在另一个组件上通过<template scope="xxx"> </template>可以获取到该组件上的数据，其中xxx就是接收到的数据（是一个对象，通过xxx.数据就可以使用数据了）。（xxx和xxxx的名字是可以不同的）
（4）作用域插槽必须使用template标签包裹
（5）template标签中的属性可以使用scope，也可以使用slot-scope，只是后者版本更新

组件自身是指使用插槽< slot></ slot>的那个组件。 ↩︎

初学Vue（全家桶）-第16天（vue2）：插槽相关推荐

VUE全家桶 REACT jQuery
VUE VUE.js是一款JavaScript框架,Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. VUE只关注视图层,Vue 的目标是通过尽可能简单的 AP ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
[在线+源码]vue全家桶+Typescript开发一款习惯养成APP
vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 源码地址欢迎star 项目演示地址建议直接添加到主屏幕(ios端体验差一些). ...
vue全家桶+koa2+mongoDB打造全栈社区博客
背景一直以来都想自己编写一个自己的社区博客,后来在网上找了一下,最后决定参考慕课网的一个社区项目,决定改用vue2.6+AntdForVue+koa2+mongoose实现一套社区博客. 简介这是 ...
视频教程-Vue全家桶前后台分离实战案例（含资料）-Vue
Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...
vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多大佬可根据目录选择性查阅新人可一步步来阅读 1 前言 1.1 业务场景突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
Vue全家桶+Socket.io+Koa2打造一个智能聊天室接口已开放
Vue.js+Socket.io+Koa2打造一个智能聊天室 Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室. 已经开源啦!为了方便大家学习,智能机器人.IP定 ...
vue音乐笔记_基于vue全家桶的移动端音乐web app
项目描述这是一个基于 Vue2.x 和网易云音乐 API制作的移动端 web app 项目:由于是出于练习和实验的目的,因此并非是网易云音乐 app 的替代品,目前也没有涵盖全部的功能: 该项目主要 ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...

初学Vue（全家桶）-第16天（vue2）：插槽

初学Vue

文章目录

插槽

1、作用

2、分类和使用方式

4、样例

默认插槽

具名插槽

作用域插槽

初学Vue（全家桶）-第16天（vue2）：插槽相关推荐

最新文章

热门文章