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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
VUE递归树形实现多级列表
Jul 15 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实例分享之html转为rtf格式
2014/06/02 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
[原创]图片分页查看
2006/08/28 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
Python下调用Linux的Shell命令的方法
2018/06/12 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
毕业自我评价范文
2013/11/17 职场文书
副董事长岗位职责
2014/04/02 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
公司出纳岗位职责
2015/03/31 职场文书
中学社团活动总结
2015/05/07 职场文书
烈士陵园观后感
2015/06/08 职场文书
六年级作文之预言作文
2019/10/25 职场文书
nginx之内存池的实现
2022/06/28 Servers