vue插槽slot的简单理解与用法实例分析


Posted in Javascript onMarch 14, 2020

本文实例讲述了vue插槽slot的简单理解与用法。分享给大家供大家参考,具体如下:

vue中插槽的使用非常广泛,本文就插槽的使用和理解简单总结。

从字面理解插槽是预先插入一个代码空间,用于后期塞入数据。

插槽分类

匿名插槽     ------------------   匿名的代码空间

具名插槽     ------------------   带有命名的代码空间

作用域插槽 -------------------   带有数据的代码空间

插槽使用示例

匿名插槽

说明在组件中先定义预留的代码空间,组件在使用时直接写入代码

<template>
 <div class="child">
  <h3>这里是子组件</h3>
  <slot></slot>
 </div>
</template>

使用:

<template>
 <div class="father">
  <h3>这里是父组件</h3>
  <child>
   <div class="tmpl">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
    <span>菜单5</span>
    <span>菜单6</span>
   </div>
  </child>
 </div>
</template>

具名插槽

预先在组件中定义一个带有名称的代码空间,使用组件时用:slot绑定名称

<template>
 <div class="child">
 // 具名插槽
 <slot name="up"></slot>
 <h3>这里是子组件</h3>
 // 具名插槽
 <slot name="down"></slot>
 // 匿名插槽
 <slot></slot>
 </div>
</template>

使用:

<template>
 <div class="father">
 <h3>这里是父组件</h3>
 <child>
  //插槽up
  <div class="tmpl" slot="up">
  <span>菜单1</span>
  <span>菜单2</span>
  <span>菜单3</span>
  <span>菜单4</span>
  <span>菜单5</span>
  <span>菜单6</span>
  </div>
  //插槽down
  <div class="tmpl" slot="down">
  <span>菜单-1</span>
  <span>菜单-2</span>
  <span>菜单-3</span>
  <span>菜单-4</span>
  <span>菜单-5</span>
  <span>菜单-6</span>
  </div>
  //匿名插槽
  <div class="tmpl">
  <span>菜单->1</span>
  <span>菜单->2</span>
  <span>菜单->3</span>
  <span>菜单->4</span>
  <span>菜单->5</span>
  <span>菜单->6</span>
  </div>
 </child>
 </div>
</template>

作用域插槽 (有数据,但放开了渲染)

在组件中预先定义一个带有数据资源的代码空间,使用组件时可以直接使用代码空间中的数据

定义

<template>
 <div class="child">
 
 <h3>这里是子组件</h3>
 // 作用域插槽
 <slot :data="data"></slot>
 </div>
</template>
export default {
 data: function(){
  return {
  data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
  }
 }
}

使用

<template>
 <div class="father">
 <h3>这里是父组件</h3>
 <!--第一次使用:用flex展示数据-->
 <child>
  <template slot-scope="user">
  <div class="tmpl">
   <span v-for="item in user.data">{{item}}</span>
  </div>
  </template>
 
 </child>
 
 <!--第二次使用:用列表展示数据-->
 <child>
  <template slot-scope="user">
  <ul>
   <li v-for="item in user.data">{{item}}</li>
  </ul>
  </template>
 
 </child>
 
 <!--第三次使用:直接显示数据-->
 <child>
  <template slot-scope="user">
  {{user.data}}
  </template>
 
 </child>
 
 <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
 <child>
  我就是模板
 </child>
 </div>
</template>

总结:

匿名插槽和具名插槽的功能是 预留插入代码的空间

作用域插槽是提供数据资源,预留代码渲染逻辑空间

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 #Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 #Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 #Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 #Javascript
JS数组的高级使用方法示例小结
Mar 14 #Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 #Javascript
js函数和this用法实例分析
Mar 13 #Javascript
You might like
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
Python读取word文本操作详解
2018/01/22 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python文件及目录操作代码汇总
2020/07/08 Python
web页面录屏实现
2019/02/12 HTML / CSS
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
学生就业推荐信
2013/11/13 职场文书
客房主管岗位职责
2013/12/09 职场文书
防沙治沙典型材料
2014/05/07 职场文书
团队激励口号
2014/06/06 职场文书
党支部活动策划方案
2014/08/18 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
基层党组织整改方案
2014/10/25 职场文书
公司慰问信范文
2015/03/23 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
导游词之镜泊湖
2019/12/09 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript