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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
input的focus方法使用
Mar 13 Javascript
Node.js模块加载详解
Aug 16 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js生成随机数的方法实例
Oct 16 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
详解js的六大数据类型
2016/12/27 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
python显示生日是星期几的方法
2015/05/27 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
绿色环保标语
2014/06/12 职场文书
司法助理专业自荐书
2014/06/13 职场文书
化验室安全管理制度
2015/08/06 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
详解CSS3浏览器兼容
2022/12/24 HTML / CSS