Vue基础19之插槽

news2025/8/7 11:54:32

Vue基础19

  • 插槽
    • 不使用插槽
      • App.vue
      • Category.vue
    • 默认插槽：slot
      • App.vue
      • Category.vue
    • 具名插槽
      • App.vue
      • Category.vue
    • 作用域插槽
      • App.vue
      • Category.vue
    • 总结

插槽

不使用插槽

App.vue

<template>
  <div class="bg">
    <Category :listData="food"  title="美食"/>
    <Category :listData="games" title="游戏"/>
    <Category :listData="movies" title="电影"/>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <ul>
        <li v-for="(item,index) in listData" :key="index">
          {{item}}
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["listData","title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

默认插槽：slot

<Category title="美食">
      <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>

    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

图片链接：
https://s3.ax1x.com/2021/01/16/srJlq0.jpg
视频链接：
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

App.vue

<template>
  <div class="bg">
    <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>
    <Category title="测试默认情况">
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
}
</style>

Category.vue

<template>
  <div class="bg">
    <h1>{{title}}</h1>
    <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
    <slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
  </div>
</template>

<script>
    export default {
        name: "Category",
      props:["title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

具名插槽

<Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
</Category>

<!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
      <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

App.vue

<template>
  <div class="bg">
    <Category title="美食">
      <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
      <a slot="footer"  href="http://www.baidu.com" class="more">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">
          {{g}}
        </li>
      </ul>
      <div slot="footer" class="foot">
        <a href="http://www.baidu.com/">单机游戏</a>
        <a href="http://www.baidu.com/">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <!--  只有template标签可以使用v-slot:xxx 的形式   -->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.baidu.com">经典</a>
          <a href="http://www.baidu.com">热门</a>
          <a href="http://www.baidu.com">推荐</a>
        </div>
        <h4 class="welcome">欢迎前来观影！</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
  data(){
    return{
        food:["火锅","烧烤","小龙虾","牛排"],
        games:["红色警戒","穿越火线","劲舞团","超级玛丽"],
        movies:["《教父》","《拆弹专家》","《你好，李焕英》","《无间道》"]
    }
  },
  methods:{
  }
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
  .more{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .foot{
    display: flex;
    justify-content: space-around;
  }
  .welcome{
    text-align: center;
  }
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <!-- 定义多个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
      <slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["title"]
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

作用域插槽

给使用者传值

<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>

使用者通过template中的scope获取值

<template scope="obj">
     <ul>
        <li v-for="(g,index) in obj.games" :key="index">
          {{g}}
        </li>
      </ul>
</template>

App.vue

<template>
  <div class="bg">
    <Category title="游戏">
      <template scope="obj">
        <ul>
          <li v-for="(g,index) in obj.games" :key="index">
            {{g}}
          </li>
        </ul>
      </template>
    </Category>

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

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

<script>
import Category from "@/components/Category";
export default {
  name: "App",
  components: {Category},
}
</script>

<style lang="less">
.bg{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
  img{
    width: 100%;
  }
  video{
    width: 100%;
  }
  .more{
    display: block;
    text-align: center;
    margin-top: 10px;
  }
  .foot{
    display: flex;
    justify-content: space-around;
  }
  .welcome{
    text-align: center;
  }
  h4{
    text-align: center;
  }
}
</style>

Category.vue

<template>
    <div class="bg">
      <h1>{{title}}</h1>
      <!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充）   -->
      <slot :games="games">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
    </div>
</template>

<script>
    export default {
      name: "Category",
      props:["title"],
      data(){
        return{
          games:["红色警戒","穿越火线","劲舞团","超级玛丽"]
        }
      }
    }
</script>

<style scoped lang="less">
.bg{
  height: 500px;
  width: 300px;
  background-color: skyblue;
  display: inline-block;
  h1{
    background-color: orange;
    text-align: center;
  }
}
</style>

在这里插入图片描述

总结

  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）作用域插槽
①理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
②具体编码：
父组件中：

<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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue-element-admin:基于element-ui 的一套后台管理系统集成方案

vue-element-admin:基于element-ui 的一套后台管理系统集成方案

文章目录一、vue-element-admin1、vue-element-admin1.1简介1.2安装2、vue-admin-template2.1简介2.2安装一、vue-element-admin 1、vue-element-admin 1.1简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub地址&#xff1a;https://github.com…
阅读更多...
redis集群模式登陆

redis集群模式登陆

总结redis单机模式时&#xff0c;登陆redis的命令格式&#xff1a; ./redis-cli -h 地址 -p 端口redis集群模式时&#xff0c;登陆redis的命令格式&#xff1a; ./redis-cli -h 地址 -p 端口 -c举例1&#xff1a;redis单机模式下登陆rootubuntu:/usr/local/redis/redis-7.0.0/b…
阅读更多...
使用IPEmotion进行声学采集与分析

使用IPEmotion进行声学采集与分析

一 IPEmotion简介 IPEmotion作为IPETRONIK的软件产品&#xff0c;主要应用于车辆测试以及配合不同的车载和实验室测试系统&#xff0c;并满足其测量需求。通过专业化的数据采集软件IPEmotion&#xff0c;我们可以完成数据采集过程&#xff0c;包括&#xff1a;配置数据源/仪器…
阅读更多...
信创系统借力小程序应用生态的可能性

信创系统借力小程序应用生态的可能性

随着国内市场需求的不断增长&#xff0c;国产操作系统的应用也开始逐步发展壮大。国产操作系统在与其他操作系统的竞争中&#xff0c;越来越受到用户的青睐。国产操作系统作为一个全新的市场&#xff0c;给应用开发带来了新的机遇和挑战。本文将从国产操作系统应用的现状分析、…
阅读更多...
【LeetCode】1. 两数之和

【LeetCode】1. 两数之和

题目链接&#xff1a;https://leetcode.cn/problems/two-sum/ &#x1f4d5;题目要求&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入…
阅读更多...
[Java·算法·困难]LeetCode32. 最长有效括号

[Java·算法·困难]LeetCode32. 最长有效括号

每天一题&#xff0c;防止痴呆题目示例分析思路1题解1分析思路2题解2分析思路3题解3&#x1f449;️ 力扣原文 题目 给你一个只包含 ( 和 ) 的字符串&#xff0c;找出最长有效&#xff08;格式正确且连续&#xff09;括号子串的长度。 示例 输入&#xff1a;s "(()&q…
阅读更多...
开源鸿蒙南向嵌入学习笔记——NAPI框架学习（一）

开源鸿蒙南向嵌入学习笔记——NAPI框架学习（一）

开源鸿蒙南向嵌入学习笔记——NAPI框架学习&#xff08;一&#xff09; 前言——系列介绍 本系列文章主要是记录笔者在鸿蒙南向的学习与工作中的知识点笔记记录&#xff0c;其中不止会针对鸿蒙中的学习问题进行思考与记录&#xff0c;也会对涉及到的一些嵌入式等其他领域知识&…
阅读更多...
[N0wayBack 练习题] My_enc,Euler,EasyLock,RRRRSA,EasyNumber,pwn

[N0wayBack 练习题] My_enc,Euler,EasyLock,RRRRSA,EasyNumber,pwn

加入一个队,队里的练习题不少,还有WP真好My_enc原题from secret import flag import randomdef Cyber_key(LEN):Key [[] for i in range(row)]for x in range(row):for i in range(LEN):Key[x].append(random.randint(0, 2023))return Keydef Punk_enc(Key, msg):out []for l…
阅读更多...
什么是API接口

什么是API接口

API接口是指应用程序接口&#xff0c;是一种让不同的应用程序之间进行数据交互的方式。在现代软件开发中&#xff0c;API接口已经成为了必不可少的一部分。它们让开发者们可以将不同的功能组合在一起&#xff0c;同时也让不同的应用程序之间可以相互连接和通讯。API接口的作用A…
阅读更多...
钓鱼客服到拿下服务器全过程（重点在于钓鱼添加img src）

钓鱼客服到拿下服务器全过程（重点在于钓鱼添加img src）

重点总结 钓鱼时主动在变量中添加了字段&#xff0c;等待用户点击获取ip信息进行下一步资金盘plus呢 左看右看没啥东西&#xff0c;看看客服系统能不能打xss。 吊毛客服居然不在线&#xff0c;这套客服系统见过是whisper&#xff0c;之前审计过没有存储xss 但能通过伪造图片…
阅读更多...
Codeforces Round 856 (Div. 2)（A~D）

Codeforces Round 856 (Div. 2)（A~D）

A. Prefix and Suffix Array给出一个字符串的所有前缀和后缀&#xff0c;判断这个字符串是否是回文串。给出的前后缀都不是整个字符串。思路&#xff1a;如果是回文的话&#xff0c;那每一个等长的字符串也都是相同的。AC Code&#xff1a;#include <bits/stdc.h>typedef…
阅读更多...
AQS底层源码深度剖析-BlockingQueue

AQS底层源码深度剖析-BlockingQueue

目录 AQS底层源码深度剖析-BlockingQueue BlockingQueue定义 队列类型 队列数据结构 ArrayBlockingQueue LinkedBlockingQueue DelayQueue BlockingQueue API 添加元素 检索(取出)元素 BlockingQueue应用队列总览图 AQS底层源码深度剖析-BlockingQueue【重点中的重…
阅读更多...
Spark Join大大表

Spark Join大大表

Spark Join大大表分而治之拆分内表外表的重复扫描案例负隅顽抗数据分布均匀数据倾斜Task 数据倾斜Executor 数据倾斜两阶段 ShuffleExecutors 调优案例Join 大大表 : Join 的两张体量较大的事实表&#xff0c;尺寸相差在 3 倍内&#xff0c;且无法广播变量用大表 Join 大表才能…
阅读更多...
观点丨Fortinet谈ChatGPT火爆引发的网络安全行业剧变

观点丨Fortinet谈ChatGPT火爆引发的网络安全行业剧变

FortiGuard报告安全趋势明确指出“网络攻击者已经开始尝试AI手段”&#xff0c;ChatGPT的火爆之际的猜测、探索和事实正在成为这一论断的佐证。攻守之道在AI元素的加持下也在悄然发生剧变。Fortinet认为在攻击者利用ChatGPT等AI手段进行攻击的无数可能性的本质&#xff0c;其实…
阅读更多...
动环监控4大应用价值，这个价值最大

动环监控4大应用价值，这个价值最大

机房管理&#xff0c;已成为企业管理和发展的首要任务。为提升机房管理的效率&#xff0c;应从空间环境、设备性能等多角度&#xff0c;对机房环境监测进行实时监控掌握相关数据参数&#xff0c;确保故障隐患及时发现&#xff0c;提高机房整体管理水平&#xff0c;降低运维难度…
阅读更多...
Hadoop三大框架之HDFS

Hadoop三大框架之HDFS

一、概述HDFS产生的背景及定义HDFS产生背景随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;需要一种系统来管理多台机器上的文件&#xff0c;这就是分布式文件…
阅读更多...
一篇文章带你了解折线图

一篇文章带你了解折线图

在我们的日常生活中&#xff0c;折线图随处可见&#xff0c;如医院里的心电图、股市里的股票走势、企业中的财务报表分析&#xff0c;但是折线图的具体适用情形&#xff0c;你真的了解吗&#xff1f; 折线图&#xff08;line chart&#xff09;也叫曲线图&#xff0c;用于显示数…
阅读更多...
javaWeb在线考试系统

javaWeb在线考试系统

一、项目简介 本项目是一套javaWeb在线考试系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse 确保…
阅读更多...
python-pandapower电力系统状态估计（算例1：讲解以及基本算例实现）

python-pandapower电力系统状态估计（算例1：讲解以及基本算例实现）

提示：专栏解锁后可以查看该专栏所有文章划算 全文截图如下 文章目录 前言一、状态估计1 理论背景2 测量量3 标准偏差二、工具箱函数讲解1 定义测量create_measurement（）2 运行状态估计estimate( )3 不良数据处理remove_bad_data（）；chi2_analysis（）remove_bad_data（）…
阅读更多...
k8s调度之初探nodeSelector和nodeAffinity

k8s调度之初探nodeSelector和nodeAffinity

在k8s的调度中&#xff0c;有强制性的nodeSelector&#xff0c;节点亲和性nodeAffinity、Pod亲和性podAffinity、pod反亲和性podAntiAffinity。本篇先对nodeSelector和nodeAffinity做个初探。进入主题之前&#xff0c;先看看创建pod的大概过程kubectl向apiserver发起创建pod请求…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023