详解Vue组件之作用域插槽


Posted in Javascript onNovember 22, 2018

写作用域插槽之前,先介绍一下Vue中的slot内容分发:

详解Vue组件之作用域插槽

如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示子组件模板中定义的“<p>父组件如果没有插入内容,我将被显示</p>”这一则内容,但如果<child-component></child-component>标签之间有插入内容的话,则子组件模板中的<slot></slot>标签以及之间的内容都会被替换成<child-component></child-component>标签之间插入的内容。

这里子组件<slot>内的备用内容,作用域是子组件本身;

作用域插槽:

详解Vue组件之作用域插槽

显示结果:

详解Vue组件之作用域插槽

template内可以通过临时变量props来访问来自子组件插槽的数据msg

作用域插槽更具代表性的用例是列表组件:

详解Vue组件之作用域插槽

子组件<my-list></my-list>接受一个父组件传过来的books数组。并且将它在name为book的slot上使用v-for循环,同时暴露变量bookName,父组件的my-list标签内就可以通过props.bookName访问到绑定的数据;

作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致;

补充:vue插槽和作用域插槽的理解

插槽:

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

作用域插槽:

插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。

<ul><li
  v-for="todo in todos"
  v-bind:key="todo.id"
 >
  <!-- 我们为每个 todo 准备了一个插槽,-->
  <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
  <slot v-bind:todo="todo">
   <!-- 回退的内容 -->
   {{ todo.text }}
  </slot>
 </li>
</ul><todo-list v-bind:todos="todos">
 <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
 <template slot-scope="slotProps">
  <!-- 为待办项自定义一个模板,-->
  <!-- 通过 `slotProps` 定制每个待办项。-->
  <span v-if="slotProps.todo.isComplete">✓</span>
  {{ slotProps.todo.text }}
 </template></todo-list>

slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用,而可以用在插槽内的任何元素或组件上。

总结

以上所述是小编给大家介绍的Vue组件之作用域插槽,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
详解vue中localStorage的使用方法
Nov 22 #Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 #Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 #Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 #Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php防止sql注入的方法详解
2017/02/20 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
python中argparse模块用法实例详解
2015/06/03 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
在校学生职业规划范文
2014/01/08 职场文书
总经理人事任命书
2014/06/05 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
保留意见审计报告
2015/06/05 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Python制作一个随机抽奖小工具的实现
2021/07/07 Python