Vue中插槽的简单使用

插槽

  • 分类:默认插槽、具名插槽、作用域插槽

  • 默认插槽:让父组件可以向子组件指定位置插入html结构,也是一种组件通信的方式,适用于父组件(App)===>子组件(MyFooter)

  • 默认插槽的App组件

  • <template><div class="container"><!-- 普通写法 --><!-- title、listDate的位置为标签属性。 --><MyFooter title="游戏" :listDate="games"/>
    ​<!-- 下面都是默认插槽的书写形式--><!-- Vue会将img标签的内容解析后在传给MyFooter组件中的slot插槽中。故将普通写法:listDate="foods"删除掉 --><!-- 标签体的位置为:<MyFooter>标签体</MyFooter>   --><MyFooter title="美食" ><img src="图片地址" alt=""></MyFooter>
    ​<MyFooter title="游戏" ><ul><li v-for="(item,index) in games" :key="index" >{{ item }}</li></ul></MyFooter>
    ​<MyFooter title="电影" ><!-- controls让视频可以通过点击控制播放 --><video controls src="视频地址"></video></MyFooter><router-view /></div>
    </template>
    <script>
    import MyFooter from './components/MyFooter.vue';
    export default {name: 'App',components: { MyFooter },data() {return {foods: ['火锅', '薯条', '汉堡'],games: ['只狼', '大表哥', '黑神话悟空'],files: ['《深海》', '《战狼》', '《流浪地球》']}}
    }
    </script>
    <style lang="less" scoped>
    .container {display: flex;justify-content: space-around
    }
    img {width: 100%;
    }
    video {width: 100%;
    }
    </style>
    ​
  • 默认插槽的MyFooter组件

  • <template><div class="category"><h3>{{ title }}分类</h3><!-- 普通写法 --><!-- 普通写法通过props将listDate传过来进行展示 --><ul><li  v-for="(item,index) in listDate" :key="index" >{{ item }}</li>   </ul><!-- 插槽写法 --><!-- <slot></slot>为默认插槽,挖个坑等使用的组件填充坑的内容 --><slot>如果图片或视频未展示,展示此处的文字</slot></div>
    </template>
    ​
    <script>
    export default {name: 'MyFooter',//这里保留应该只保留title,listDate仅是普通写法需求props: ['title','listDate'],
    }
    </script>
    <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;}
    </style>
    ​
  • 具名插槽的App

  • 具名插槽的给MyFooter的slot标上名字name="xxx",在App组件中使用那个插槽则slot="xxx"。进行相互匹配

  • <template><div class="container">
    ​<!-- 有名插槽 --><!-- title的位置为标签属性。--><MyFooter title="美食" ><!-- 给img、a匹配相应的插槽名字,对应相应组件中的插槽 --><img slot="center" src="图片地址" alt=""><a slot="footer" href="网址地址">美食地址</a><a slot="footer" href="网址地址">电影地址</a></MyFooter>
    ​<MyFooter title="游戏" ><ul slot="center"><li  v-for="(item,index) in games" :key="index" >{{ item }}</li></ul><div slot="footer"><a slot="footer" href="网址地址">热门推荐</a><a slot="footer" href="网址地址">网络共享</a></div></MyFooter>
    ​<MyFooter title="电影" ><!-- controls让视频可以通过点击控制播放 --><video slot="center" controls src="视频地址"></video>\<!-- template让下列的代码少了一层div 同时可以将slot="footer"去掉,改成在template标签属性的位置使用 v-slot:footer --><template><div slot="footer"><a slot="footer" href="网址地址">动漫</a><a slot="footer" href="网址地址">生活</a></div><a slot="footer" href="网址地址">动画片</a></template></MyFooter><router-view /></div>
    </template>
    <script>
    import MyFooter from './components/MyFooter.vue';
    export default {name: 'App',components: { MyFooter },data() {return {foods: ['火锅', '薯条', '汉堡'],games: ['只狼', '大表哥', '黑神话悟空'],files: ['《深海》', '《战狼》', '《流浪地球》']}}
    }
    </script>
    <style lang="less" scoped>
    .container {display: flex;justify-content: space-around
    }
    img {width: 100%;
    }
    video {width: 100%;
    }
    </style>
     
  • 具名插槽的MyFooter

  • <template><div class="category"><h3>{{ title }}分类</h3><!-- <slot name=""></slot>为具名插槽,挖个坑等使用的组件填充坑的内容 --><slot name="center">如果图片或视频未展示,展示此处的文字</slot><slot name="footer">如果图片或视频未展示,展示此处的文字</slot></div>
    </template>
    ​
    <script>
    export default {name: 'MyFooter',props: ['title'],
    }
    </script>
    ​
    <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;}
    </style>
     
  • 作用域插槽理解:

    1、和上面两种插槽不同,作用域插槽数据(games) 在组件(MyFooter)但数据的结构需要组件的使用者(App)来决定

    2、在MyFooter通过slot传给App,App组件通过scope进行接收。

  • App组件(vm)的管家。App不仅是组件,也管理所有的组件

  • <template><div class="container">
    ​<MyFooter title="游戏" ><!-- 要想接收MyFooter传过来的games需要写成template形式通过scope来接收传过来的值,注意这里不是scoped而是scope。 --><template scope="boy"><ul ><!-- 通过{{ games }}可以知道,只有boy.games才可以拿到数组,games是MyFooter传过来的数组是不可以修改的。 --><li  v-for="(item, index) in boy.games" :key="index" >{{ item }}</li></ul></template></MyFooter>
    ​<MyFooter title="游戏" ><!-- 可以将scope="xxx"改成slot-scope="xxx"。slot-scope="xxx"是新的书写方式 --><template scope="boy"><ol ><li  v-for="(item, index) in boy.games" :key="index" >{{ item }}</li></ol></template></MyFooter>
    ​<MyFooter title="游戏" ><!-- 用ES6的形式写成{games},遍历的时候可以直接写games --><template scope="{games}"><h4  v-for="(item, index) in games" :key="index" >{{ item }}</h4></template></MyFooter>
    ​<router-view /></div>
    </template>
    <script>
    import MyFooter from './components/MyFooter.vue';
    export default {name: 'App',components: { MyFooter }
    }
    </script>
    <style lang="less" scoped>
    .container {display: flex;justify-content: space-around
    }
    img {width: 100%;
    }
    video {width: 100%;
    }
    </style>
    ​
  • 作用域插槽的MyFooter组件

  • <template><div class="category"><h3>{{ title }}分类</h3><!-- :games="games"的意思是谁往插槽放数据games就传给谁 --><slot :games="games"></slot></div>
    </template>
    ​
    <script>
    export default {name: 'MyFooter',props: ['title','listDate'],data(){return {games: ['只狼', '大表哥', '黑神话悟空'],}},   
    }
    </script>
    ​
    <style scoped lang="css">.category {background-color: skyblue;width: 200px;height: 300px;}h3 {text-align: center;}
    </style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/604263.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WebofScience快速检索文献的办法

Web of Science为什么老是搜不到文章&#xff0c;原来是要在这个地方全部勾选 如果是搜标题的话&#xff0c;选Title&#xff0c;输入你要搜的文章标题 另外&#xff0c;也可以在浏览器直接搜文章标题&#xff0c;得到文章的DOI&#xff0c;然后选DOI&#xff0c;直接搜DOI也行…

红帽Redhat(liunx)连接虚拟机

一、xshell连接虚拟机的步骤 ①在Linux里面 ifconfig去查看网络的IP地址 setup设置IP地址 service network restart 重启网卡服务 ②在windows 打开网络和共享中心→更改适配器 仅主机&#xff1a;VMnet1 IPV4的IP Net模式&#xff1a;VMnet8 ③直…

中通快递查询,中通快递单号查询,批量删除不需要的快递单号

快递单号的管理现在是许多企业和个人日常工作中不可或缺的一部分&#xff0c;面对堆积如山的快递单号&#xff0c;如何快速、准确地处理成了许多人的难题。今天&#xff0c;我们将为大家带来一款强大的快递单号处理软件——快递批量查询高手&#xff0c;让你从此告别繁琐的手动…

SpringCloud-高级篇(十一)

&#xff08;1&#xff09;搭建Redis-主从架构 前面我们实现了Redis的持久化&#xff0c;解决了数据安全问题&#xff0c;但是还有需要解决的问题&#xff0c;下面学习Redis的主从集群&#xff0c;解决Redis的并发能力的问题 Redis的集群往往是主从集群&#xff0c;Redsi为什么…

MyBatis-基本概念

一、概念 概念MyBatis官方文档介绍&#xff1a;MyBatis is a first class persistence framework with support for custom SQL, stored procedures and advanced mappings. MyBatis eliminates almost all of the JDBC code and manual setting of parameters and retrieval …

【leetcode】字符串中的第一个唯一字符

题目描述 给定一个字符串 s &#xff0c;找到 它的第一个不重复的字符&#xff0c;并返回它的索引 。如果不存在&#xff0c;则返回 -1 。 用例 示例 1&#xff1a; 输入: s “leetcode” 输出: 0 示例 2: 输入: s “loveleetcode” 输出: 2 示例 3: 输入: s “aabb”…

游戏缺少x3daudio1_7.dll文件怎么办?x3daudio1_7.dll丢失总共有六个解决方法

导语&#xff1a;在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“x3daudio1_7.dll丢失”。那么&#xff0c;x3daudio1_7.dll到底是什么文件呢&#xff1f;它的作用和影响又是什么呢&#xff1f;本文将为您详细介绍x3daudio1_7.dll的相关知…

linux cpu、memory 、io、网络、文件系统多种类型负荷模拟调测方法工具

目录 一、概述 二、stress介绍和使用 2.1 介绍 2.2 使用 三、stress-ng介绍和使用 3.1 介绍 3.2 使用 3.3 实例 四、sysbench 4.1 介绍 4.2 使用 五、lmbench 5.1 介绍 5.2 使用 一、概述 今天介绍两款cpu负荷调试工具,用来模拟多种类型的负载。主要用来模拟CPU…

LabVIEW开发自动光学焊点检测系统

LabVIEW开发自动光学焊点检测系统 LabVIEW于开发了一个自动光学焊点检测系统&#xff0c;旨在提高电子元件焊接的质量和效率。通过利用LabVIEW的高级视觉开发模块&#xff0c;该系统能够准确地识别和分类电路板上的不同焊点类型&#xff0c;如桥接、虚焊、漏焊和多锡。这一进步…

Java最大优先队列设计与实现

Java 学习面试指南&#xff1a;https://javaxiaobear.cn 1、API设计 类名MaxPriorityQueue构造方法MaxPriorityQueue(int capacity)&#xff1a;创建容量为capacity的MaxPriorityQueue对象成员方法private boolean less(int i,int j)&#xff1a;判断堆中索引i处的元素是否小…

Docker中swarm管理工具

Docker中swarm管理工具 1 安装swarm swarm是Docker自带的容器集群管理工具。 1.1 集群IP 主机名ip地址网卡名软件master192.168.108.201ens33Dockernode1192.168.108.202ens33Docker 修改主机名 # 管理节点&#xff0c;修改主机名 hostnamectl set-hostname master# 子节…

面试 React 框架八股文十问十答第一期

面试 React 框架八股文十问十答第一期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;React 生命周期是怎样…

PHP代码审计之实战审代码篇2

4. 仔细观察如下代码&#xff0c;思考代码有什么缺陷&#xff0c;可能由此引发什么样的问题&#xff1f; <?php require_once("/home/rconfig/classes/usersession.class.php"); require_once("/home/rconfig/classes/ADLog.class.php"); require_onc…

neo4j-cypher语言使用

neo4j-cypher语言使用 neo4j的本质就是节点关系。节点是用小括号来表示&#xff0c;&#xff08;节点&#xff1a;节点标签 {属性名称&#xff1a;属性值}&#xff09;with 本质是with(变量) 传送到下一个语句&#xff0c;with 子处理(变量), with 查询return 变量。unwind 本质…

【二】使用create-vue创建vue3的helloworld项目(推荐)

create-vue 官网&#xff1a;快速上手 | Vue.js create-vue 是 Vue3 的专用脚手架&#xff0c;使用 vite 创建 Vue3 的项目&#xff0c;也可以选择安装需要的各种插件&#xff0c;使用更简单。 1、使用方式 npm create vuelatest这个命令会安装和执行 create-vue&#xff0…

k8s的yaml文件中的kind类型都有哪些?(清单版本)

在操作kubenates的过程中&#xff0c;我们接触到的yaml文件中的kind类型有很多。他们代表了kubenate的不同类型的对象&#xff0c;了解了kind的类型&#xff0c;也就相当于了解了k8s都有哪些类型的对象。 类型清单及概要说明 序号类型简述1Pod一个Kubernetes中最基本的资源类型…

排序算法记录

冒泡排序 public class BubbleSorting20230704 {public static void main(String[] args) {int[] numbers new int[]{2,3,1,5,4};for(int i0;i<numbers.length;i){for (int j0;j<numbers.length-1-i;j){if(numbers[j]>numbers[j1]){int temp numbers[j];numbers[j]…

【MATLAB源码-第105期】基于matlab的4PAM调制解调仿真,输出误码率和误符号曲线并且和理论值对比。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 4PAM&#xff08;4-Pulse Amplitude Modulation&#xff0c;4脉冲幅度调制&#xff09;是一种数字调制技术&#xff0c;它通过改变载波信号的幅度来表示数据。在4PAM中&#xff0c;载波的幅度可以采用四种不同的水平&#xf…

天翼云搭建AIGC开发环境综合教程

一、英伟达环境安装主要流程 1、下载安装对应系统版本nVidia驱动程序安装验证 2、CUDA开发套件安装验证 3、深度学习框架安装验证MiniConda3PyTorch 4、容器化CUDA环境安装验证 5、cuDNN深度学习优化驱动安装CNN训练验证 6、制作天翼云主机私有镜像 7、分享镜像给其他用…

File-一个IO流中至关重要的类

File类 概述&#xff1a;文件和目录路径名的抽象表示&#xff0c;File 对象就代表一个路径 对与File而言&#xff0c;其封装的并不是一个真正存在的文件&#xff0c;仅仅是一个路径名而已。它可以是存在的&#xff0c;也可以是不存在的。将来要通过具体的操作把这个路径的内容…