Vue深入理解插槽slot的使用


Posted in Vue.js onAugust 05, 2022

一、插槽(slot)是什么

slot是组件内的一个占位符,该占位符可以在后期使用自己的标记语言填充。

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

例子:

//父组件中
<Category>
	<div>html结构</div>
</Category>
//子组件中:
<template>
	<div>
		<slot>插槽的默认内容</slot>
	</div>
</template>

二、使用场景

  • 通过插槽可以让用户拓展组件,去更好地复用组件和对其做定制化处理;
  • 如果父组件在使用到一个复用组件的时候,这个组件在不同的地方有少量的更改,如果去重写组件是很浪费,这时,通过slot插槽向组件内部指定位置传递内容,完成这个复用组件在不同场景的应用。
  • 比如:布局组件、表格列、下拉选项、弹框显示内容等。

三、slot的分类

默认插槽

子组件用<slot>来标记渲染的位置,在父组件的自定义标签中写slot中的结构。如果在子组件的<slot>中写了结构,那么会作为默认显示的内容。

//父组件(数据在父组件中)
<template>
  <div id="app">
    <Category title="美食">
      <ul>
        <li v-for="(item,key) in foods" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="游戏">
     <ul>
        <li v-for="(item,key) in games" :key="key">{{item}}</li>
    </ul>
    </Category>
    <Category title="电影"></Category>
  </div>
</template>
//子组件
<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot>默认显示内容</slot>
  </div>
</template>

效果:

Vue深入理解插槽slot的使用

具名插槽

为每个slot标记名字,也是处理具有多个插槽时的对应关系,标记名字的方法有两个:

方法1:

//父组件
<Category title="美食">
<ul slot="foods">
   <li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
//子组件
<h3>{{title}}分类</h3>
<slot name="foods">默认显示内容</slot>     /*给插槽取名*/

方法2:此时必须标记在template标签上

<template v-slot:foods>
    <ul>
      <li v-for="(item,key) in foods" :key="key">{{item}}</li>
  </ul>
</template>

作用域插槽

当元素在子组件中时,想实现上述操作,就会造成数据获取不到的问题,这时就可以使用作用域插槽,作用域这三个字就体现在数据的作用域上。

//父组件
<template>
  <div id="app">
    <Category title="美食">
      <template scope="foods">
        <ul>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ul>
      </template>
    </Category>
    <Category title="美食">
      <template scope="foods">
      <!-- <template slot-scope="foods"> -->
        <ol>
          <li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
        </ol>
      </template>
    </Category>
  </div>
</template>
//子组件:数据在子组件中
<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot :foods="foods">默认显示内容</slot>
  </div>
</template>

可以通过解构获得slot-scope={foods},还可以重命名slot-scope={new:foods}

四、介绍对slot的理解

回答:slot就是插槽,主要的作用就是拓展组件,在重复使用一个组件的时候可以通过少量的修改就达到复用的效果。分成默认插槽、具名插槽和作用域插槽。其中前两个都是元素在父组件中,拓展的结构也在父组件中,直接在子组件中占位,在父组件中添加结构即可,区别就是具名插槽给插槽取了名字,多个插槽存在时可以一一对应。而作用域插槽的数据在子组件中,扩展的结构要在父组件中,这是就要利用slot进行子===>父的通信,给数据一个新的作用域,因此叫做作用域插槽。

到此这篇关于Vue深入理解插槽slot的使用的文章就介绍到这了,更多相关Vue slot内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
详解Vue的mixin策略
Nov 19 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 #Vue.js
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
Vue2项目中对百度地图的封装使用详解
vue如何在data中引入图片的正确路径
Jun 05 #Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 #Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 #Vue.js
You might like
php获取文件大小的方法
2014/02/26 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python和JavaScript哪个容易上手
2020/06/23 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
联强国际笔试题面试题
2013/07/10 面试题
志愿者服务感言
2014/02/27 职场文书
学生会部长竞聘书
2014/03/31 职场文书
装修活动策划方案
2014/08/27 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
2014年车间工作总结
2014/11/21 职场文书
小学运动会报道稿
2015/07/22 职场文书
法制工作总结2015
2015/07/23 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS