【Vue插槽详解】

news2025/7/13 9:01:20

Vue插槽详解

  • Vue插槽的作用
  • 一、默认插槽
        • 完整代码：
  • 二、具名插槽
        • 完整代码：
  • 三、作用域插槽
        • 完整代码如下：

Vue插槽的作用

Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于父组件===>子组件，在要接收数据的组件页面通过<slot>标签来表示，简单来说，就是通过此标签来起到占位的作用，而要插入的内容也会对应到标签所在的位置。

一、默认插槽

默认插槽是插槽最基本的方式：
首先在父组件App.Vue中引入子组件，并在引入的子组件标签内插入需要的html元素，在子组件中把需要用插槽的地方用<slot>标签替代：

在App.vue中引入子组件，使用子组件，并且声明需要的数据：
1.引入组件：

import StudyM from './components/StudyM.vue'

2.使用组件：

<template>
  <div id="app">
    <!-- 默认插值 -->
    <StudyM title="游戏列表">
      <ul>
        <li v-for="game , index in games" :key="index">{{game}}</li>
      </ul>
    </StudyM>
    <StudyM title="推荐音乐">
      <ul>
        <li v-for="music , index in musics" :key="index">{{music}}</li>
      </ul>
    </StudyM>
    <StudyM title="电影推荐">
      <ul>
        <li v-for="movie , index in movies" :key="index">{{movie}}</li>
      </ul>
    </StudyM>
  </div>
</template>

3.添加数据：

data(){
    return{
      games:['英雄联盟', '炉石传说', '穿越火线', 'QQ飞车', '吃鸡'],
      musics:['迷途羔羊', '红玫瑰', '富士山下', '麻雀', '妈妈的话', '故乡'],
      movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']
    }
  }

完整代码：

App.vue:

<template>
  <div id="app">
    <!-- 默认插值 -->
    <StudyM title="游戏列表">
      <ul>
        <li v-for="game , index in games" :key="index">{{game}}</li>
      </ul>
    </StudyM>
    <StudyM title="推荐音乐">
      <ul>
        <li v-for="music , index in musics" :key="index">{{music}}</li>
      </ul>
    </StudyM>
    <StudyM title="电影推荐">
      <ul>
        <li v-for="movie , index in movies" :key="index">{{movie}}</li>
      </ul>
    </StudyM>
  </div>
</template>

<script>
  //引入组件
  import StudyM from './components/StudyM.vue'
export default {
  name: 'App',
  components: {
    StudyM
  },
  data(){
    return{
      games:['英雄联盟', '炉石传说', '穿越火线', 'QQ飞车', '吃鸡'],
      musics:['迷途羔羊', '红玫瑰', '富士山下', '麻雀', '妈妈的话', '故乡'],
      movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']
    }
  }
}
</script>

<style scoped>
#app{
  display: inline-flex;
  justify-content: center;
}
</style>

StudyM.vue:

<template>
  <div class="box">
    <h4>{{title}}</h4>
    <slot></slot>
  </div>
</template>

<script>
export default {
    name:'StudyM',
    props:['title'],
}
</script>

<style scoped>
.box{
  margin: 20px;
  width: 200px;
  height: 200px;
  background-color: aqua;
}
h4{
  text-align: center;
  background-color: rgb(127, 236, 113);
}
</style>

此时，我们已经完成了默认插槽的使用：
效果图：默认插槽使用

二、具名插槽

简单来说，所谓的具名插槽就是有名字的插槽

那它和默认插槽有什么不同呢？
有时候我们会遇到这种场景，在一个组件中，我们虽然可以复用组件的结构，但是往往，有时候我们会遇到一个组件多用，但是结构稍微有所差别的情况，这时，就会用得到具名插值。

首先在要插入html的部分需要用一个<template>标签包裹住各个部分：

<!-- 具名插槽的写法一 -->
      <template slot="one">
        <ul>
          <li v-for="game , index in games" :key="index">{{game}}</li>
        </ul>
      </template>

其次，当给<template>标签绑定slot=“name” 属性时，需要在子组件中对应每个<template> 给出一个<slot> 并且添加上name属性:

<div class="box">
    <h4>{{title}}</h4>
    <slot name="one"></slot>
    <slot name="tow"></slot>
  </div>

完整代码：

App.vue:

<template>
  <div id="app">
    <!-- 默认插值 -->
    <StudyM title="游戏列表">
      <!-- 具名插槽的写法一 -->
      <template slot="one">
        <ul>
          <li v-for="game , index in games" :key="index">{{game}}</li>
        </ul>
      </template>
      <!-- 具名插槽的写法二 -->
      <template v-slot:tow>
        <a href="https://lol.qq.com/main.shtml">英雄联盟官网由此进入</a><br/><br>
        <a href="https://www.wegame.com.cn/">了解更多游戏</a>
      </template>
    </StudyM>
    <StudyM title="推荐音乐">
      <template slot="one">
        <ul>
          <li v-for="music , index in musics" :key="index">{{music}}</li>
        </ul>
      </template>
      <template slot="tow">
        <button>点击进入QQ音乐</button>&nbsp;&nbsp;&nbsp;
        <button>点击进入网易云音乐</button>
      </template>
    </StudyM>
    <StudyM title="电影推荐">
      <template slot="one">
        <ul>
          <li v-for="movie , index in movies" :key="index">{{movie}}</li>
        </ul>
      </template>
      <template slot="tow">
        <video controls src="https://www.oppo.com/content/dam/oppo/product-asset-library/find/find-n/v1/assets/tvc-preview-3d0357.mp4"></video>
      </template>
    </StudyM>
  </div>
</template>

<script>
  //引入组件
  import StudyM from './components/StudyM.vue'
export default {
  name: 'App',
  components: {
    StudyM
  },
  data(){
    return{
      games:['英雄联盟', '炉石传说', '穿越火线', 'QQ飞车', '吃鸡'],
      musics:['迷途羔羊', '红玫瑰', '富士山下', '麻雀', '妈妈的话', '故乡'],
      movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']
    }
  }
}
</script>

<style scoped>
#app{
  display: inline-flex;
  justify-content: center;
}
video{
  width: 100%;
}
</style>

StudyM.vue:

<template>
  <div class="box">
    <h4>{{title}}</h4>
    <slot name="one"></slot>
    <slot name="tow"></slot>
  </div>
</template>

<script>
export default {
    name:'StudyM',
    props:['title'],
}
</script>

<style scoped>
.box{
  margin: 20px;
  width: 300px;
  padding: 20px;
  background-color: aqua;
}
h4{
  text-align: center;
  background-color: rgb(127, 236, 113);
}
</style>

此时，我们已经完成了具名插槽的使用
效果图如下：
具名插槽的使用

值得注意的是，在具名插槽当中，我们不仅要使用到<template>标签，而且还要在其中声明slot="name"属性，在子组件中的<slot>标签中接收传过来的name

三、作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，也就是说，作用域插槽的不同之处就在于，数据不在父组件身上，而是在子组件身上，且组件的结构和内容由父组件决定。作用域组件限定了组件内结构和数据的展示范围，以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。

使用作用域插槽，数据在子组件中，需要通过数据绑定传给使用者插入html的部分：

<div class="box">
    <h4>{{title}}</h4>
    <!-- 把数据传给插入的html部分 -->
    <slot :movies="movies"></slot>
  </div>

此时，在使用者组件中，使用<template> 中的scope="Data"属性将数据传递过来：

<StudyM title="游戏列表">
      <template scope="one">
        <!-- 第一种结构 -->
        <ul>
          <li v-for="m,index in one.movies" :key="index">{{m}}</li>
        </ul>
      </template>
    </StudyM>

完整代码如下：

App.vue:

<template>
  <div id="app">
    <!-- 默认插值 -->
    <StudyM title="游戏列表">
      <template scope="one">
        <!-- 第一种结构 -->
        <ul>
          <li v-for="m,index in one.movies" :key="index">{{m}}</li>
        </ul>
      </template>
    </StudyM>

    <StudyM title="游戏列表">
      <template scope="one">
        <!-- 第二种结构 -->
        <ol>
          <li v-for="m,index in one.movies" :key="index">{{m}}</li>
        </ol>
      </template>
    </StudyM>

    <StudyM title="游戏列表">
      <template scope="one">
        <!-- 第三种结构 -->
          <h4 v-for="m,index in one.movies" :key="index">{{m}}</h4>
      </template>
    </StudyM>
  </div>
</template>

<script>
  //引入组件
  import StudyM from './components/StudyM.vue'
export default {
  name: 'App',
  components: {
    StudyM
  },
}
</script>

<style scoped>
#app{
  display: inline-flex;
  justify-content: center;
}
video{
  width: 100%;
}
</style>

StudyM.vue:

<template>
  <div class="box">
    <h4>{{title}}</h4>
    <!-- 把数据传给插入的html部分 -->
    <slot :movies="movies"></slot>
  </div>
</template>

<script>
export default {
    name:'StudyM',
    props:['title'],
    data(){
      return{
        movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']
      }
    }
}
</script>

<style scoped>
.box{
  margin: 20px;
  width: 300px;
  padding: 20px;
  background-color: aqua;
}
h4{
  text-align: center;
  background-color: rgb(127, 236, 113);
}
</style>

此时，我们已经完成了作用域插槽的使用：
效果图如下：
作用域插槽的使用
以上内容就是Vue中插槽的三种不同类型的用法，在理解起来的时候，作用域插槽是相对来说难理解的，希望能够对大家有用，若有不对或是理解有偏差可以私信我

别忘记点个赞，加个关注再走哟！！！

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

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

相关文章

记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 提升首屏的加载速度&#xff0c;是前端性能优化中最重要的环节&#xff0c;这里笔者梳理出一些 常规且有效 的首屏优化建议 目标&#xff1a; 通过对比优化前后的性能变化&#xff0c;来验证方案的有效…
阅读更多...
除夕最绚丽3D烟花代码（html+音效）

除夕最绚丽3D烟花代码（html+音效）

今天就是除夕了&#xff0c;新年怎么能少得了烟花呢&#xff1f;虽然绝大部分地区禁止燃放烟花&#xff0c;但该欣赏的烟花还是要欣赏滴~~ 最近整理文件&#xff0c;找到了一份烟花代码&#xff0c;3D特效&#xff0c;今天分享给大家&#xff0c;希望大家喜欢。 话不多说&#…
阅读更多...
uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

线上已解决问题的代码 记录时间 2022.12.10 //获得地理定位信息uni.getLocation({type: wgs84,success: function(resp) {console.log(11111);//保存纬度数据let latitude resp.latitude;//保存经度度数据let longitude resp.longitude;console.log(经度 latitude);console…
阅读更多...
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

掌握分寸感&#xff0c;找目标一致的人协同你&#xff0c;有效地调配资源&#xff0c;就可以提高效率。 写在前面的话&#xff1a;博主最近想要搭建自己的前端若依项目&#xff0c;因此此系列博客会做一些记录。我的项目gitee地址&#xff1a; https://gitee.com/xuruicong/rac…
阅读更多...
less和sass的区别[简洁易懂]

less和sass的区别[简洁易懂]

一、基础知识 1.sass&#xff0c;less都是CSS的预处理器&#xff0c;其基本思想就是用编程的思路编写CSS代码。增加了变量&#xff0c;嵌套&#xff0c;函数&#xff0c;语句&#xff0c;继承等概念。有助于模块化开发&#xff0c;例如写一个换肤的效果&#xff0c;以前我们需要…
阅读更多...
前端200道面试题及答案（更新中）

前端200道面试题及答案（更新中）

目录 html相关 1&#xff09;说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别&#xff1f; 2&#xff09;link和import的区别 3&#xff09;浏览器如何实现不同标签页的通信&#xff1f; 4&#xff09;iframe的优缺点 5&#xff09;canvas 6&#x…
阅读更多...
Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

To 初学Python的Pythonista: Sublime Text相对于PyCharm和Visual Studio Code&#xff0c;确实有不足之处&#xff0c;但提供了众多功能丰富的插件&#xff0c;且最大优点就是相对于Pycharm和VSCODE&#xff0c;它体积小&#xff0c;启动速度快。对于Python的初学者来说&#…
阅读更多...
JavaScript基础总结---重点

JavaScript基础总结---重点

目录JavaScript简介什么是JavaScript浏览器执行JS过程JS的组成JS的引入方式函数与作用域arguments的使用全局变量与局部变量预解析对象创建对象的三种方式1.利用字面量创建对象2.利用 new Object 创建对象3.利用构造函数创建对象遍历对象属性变量、属性、函数、方法总结new关键…
阅读更多...
节点流和处理流详解

节点流和处理流详解

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 1. 基本介绍 节点流可以从一个特定的数据源读写数据&#xff0c;如FileReader&#xff0c;FileWriter处理流&#xff08;也叫包装流&#xff09;是“连接”在已存在的流&#xff08;节点流或处理流&#xff09;之上&#x…
阅读更多...
web服务器项目常见面试题目（C++）

web服务器项目常见面试题目（C++）

项目介绍 1、为什么要做这样一个项目&#xff1f; 在学习CPP语言的时候&#xff0c;发现需要做一个项目来巩固一下&#xff0c;网上有推荐这个项目&#xff0c;然后就自己尝试做了一下。这个项目综合性比较强&#xff0c;从中既能学习Linux环境下的一些系统调用&#xff0c;也…
阅读更多...
Vue3创建项目（一）新手教程

Vue3创建项目（一）新手教程

✅作者简介&#xff1a; 我是痴心阿文&#xff0c;你们的学友哥。 整理一下Vue3创建项目&#xff0c;新手教程&#xff0c;看完需要预计花费10分钟。 1.环境准备 Vue依赖NodeJs的环境&#xff0c;需要先安装Nodejs。 2.NodeJs安装 打开NodeJs下载页选择自己系统对应的版本下载。…
阅读更多...
【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA_Web】书店管理系统&#xff08;附带前后端源码及资源&#xff09; 一、项目的目的和意义 1.1目的 在“互联网”的大趋势下&#xff0c;线上销售以其简单、便捷、高效的特点受到人们的青睐。网上书店不受时间或者空间的限制&#xff0c;只要在网络覆盖的地方人们就可以…
阅读更多...
vue3 动态加载组件、动态引入组件

vue3 动态加载组件、动态引入组件

1.问题 在做一个用vite构建的vue3项目时&#xff0c;动态拉取导入.vue页面&#xff0c;然后控制台一直有以下提示&#xff0c;页面也无法渲染出来。 2.分析 根据上面的报错提示&#xff0c;让我们安装并使用&#xff1a;rollup/plugin-dynamic-import-vars 这个插件&#xff0…
阅读更多...
JS遍历对象的七种方法

JS遍历对象的七种方法

我根据阮老师的《ES6标准入门》学习并总结了七种遍历对象的方法&#xff0c;我会将分别介绍这七种方法并进行详细的区分&#xff0c;并将从属性可枚举性问题与遍历方法两个大方面讲述全文&#xff0c;其中可枚举性是掌握遍历对象之前的的铺垫&#xff0c;请读者耐心学习&#x…
阅读更多...
【解决vscode终端输出中文乱码问题图文教程】

【解决vscode终端输出中文乱码问题图文教程】

全网最全解决vscode运行C/C终端输出乱码问题图文教程解决vscode终端输出中文乱码问题&#xff0c;强推**方法二**&#xff0c;少走几年弯路乱码原因方法一&#xff08;永久性&#xff09;方法二&#xff08;永久性&#xff09;强力推荐&#xff01;&#xff01;&#xff01;&am…
阅读更多...
Vue3中样式渗透:deep()为什么无效

Vue3中样式渗透:deep()为什么无效

今天学习 /deep/ 样式穿透&#xff0c;因为vue3中已经使用:deep()取代了/deep/ &#xff0c;所以直接用:deep()练习。 :deep()的使用场景&#xff1a; 如果给当前组件的style 节点添加了scoped 属性&#xff0c;则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组…
阅读更多...
DVWA（全级别通关教程详解）

DVWA（全级别通关教程详解）

文章目录Brute ForceLowMediumCommand InjectionLowMediumHighCSRFLowMediumHighFile InclusionLowMediumHighFile UploadLowMediumHighSQL Injection &#xff08;手工&#xff09;LowMediumHighSQL Injection(工具)LowMediumHighSQL Injection (Blind)Low布尔盲注时间盲注XSS…
阅读更多...
若依RuoYi框架log图标与文字怎么改？

若依RuoYi框架log图标与文字怎么改？

文章目录1.若依修改主界面图标2.若依修改主界面文字3.若依修改页面上方图标4.若依修改页面上方文字5.若依登录页面文字修改6.免费图片转换网站1.若依修改主界面图标 图片路径: /src/assets/logo/logo.png直接将想要替换的png格式图片将其替换即可&#xff0c;图片大小建议为60*…
阅读更多...
Vue的生命周期的详解

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识&#xff0c;以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程&#xff0c;也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期&#xff0c;也就是从开始创建、初…
阅读更多...
vue中input标签上传本地文件或图片后获取完整路径，如E:\medicineOfCH\stageImage\xxx.jpg

vue中input标签上传本地文件或图片后获取完整路径，如E:\medicineOfCH\stageImage\xxx.jpg

前言&#xff1a; 好久没有写vue了。今天遇到一个需求&#xff1a;使用input框来上传图片类型&#xff0c;并且在选择之后立刻回显出来。使用< input type“file”/>在选定图片后再< img src“xxx”/>。今天在实现这个需求的时候主要是出现了三个问题&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023