vue组件之具名slot 的分类案例
需求说明:
- 利用组件的复用完成美食、游戏、电影的分类布局。
- 使用具名slot完成分类组件的不同内容显示。
实现过程:
1.创建一个分类子组件(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.在父组件(App.vue)中复用Category子组件及slot分发内容完成页面布局:
<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>
vue组件之具名slot 的分类案例相关推荐
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- VUE之组件(插槽slot与可复用组件)
插槽slot 首先创建个基础组件,然后在页面调用显示,如下所示 <div id="app"><blog></blog></div>& ...
- 四、Vue组件化开发学习笔记——父子组件通信,父级向子级传值(props),子级向父级传值(自定义事件),slot插槽
一.父子组件的通信 在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
- 【VUE3】保姆级基础讲解(二)计算属性,vue组件,vue-cli脚手架,组件通讯,插槽slot
目录 计算属性computed 侦听器watch 对象监听 组件 注册全局组件 注册局部组件 Vue-CLI脚手架 安装和使用 .browserslistrc main.js jsconfig.jso ...
- div滚动到指定位置 vue_【Vue 进阶】从 slot 到无渲染组件
什么是插槽 插槽(slot)通俗的理解就是"占坑",在组件模板中占有位置,当使用该组件的时候,可以指定各个坑的内容.也就是我们常说的内容分发 值得一提的是,插槽这个概念并不是 Vu ...
- slot多作用域 vue_详解Vue.js 作用域、slot用法(单个slot、具名slot)
作用域HEi免费资源网 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
- vue组件通信案例练习(包含:父子组件通信及平行组件通信)
文章目录 一.案例概述 二.代码 准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现 案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
- Vue 组件间通信方式汇总,总有一款适合你( 附项目实战案例 )
前言 前期分享的 200行纯前端Vue代码!教你写一个专属TodoList[零基础友好] 这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的,具体使用方式将在下面进行详细介绍 ...
- 【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...
最新文章
- 据廖雪峰python3教程----python学习第二天
- Ardino基础教程 20_红外遥控
- Android 五大存储方式具体解释
- 关于Windows Unicode 编码的问题
- 「转型新范式」第四范式2021发布会全程直播倒计时
- Linux异步IO实现方案总结
- 测试用例编号_怎样编写测试用例更完整,更能提升工作效率?来试试这套方法!...
- 【2017百度之星程序设计大赛 - 资格赛】	度度熊与邪恶大魔王
- 离职113天后,微软的“中国先生”沈向洋云受聘清华大学教授
- L101 L201 ME35 ME350 SX235W EP-801A ME535 清零软件
- 蓝桥杯 ALGO-27 算法训练 FBI树 Java版
- 求助!妹子一个rm -rf把公司服务器数据删没了,我该怎么办
- 剑指offer 数字在排序数组中出现的次数
- Google Chrome 谷歌浏览器历史版本下载
- 网页设计的常用字体规范
- EXCEL插件《二维码标签工具》
- ET框架学习1-服务端的认识
- spring-IOC注解部分笔记整理(观看IT黑马视频自学)
- 大作手操作体系:突破后回调不下箱体可加仓,但是也有失误的时候!
- 主流HTML5游戏开发引擎的分析和对比