浅析vue插槽和作用域插槽的理解


Posted in Javascript onApril 22, 2019

插槽:

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。

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

这个可以参考https://3water.com/article/160047.htm。这位作者写的很详细。

作用域插槽:

插槽可以控制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 相关文章推荐
理解Javascript_08_函数对象
Oct 15 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
jQuery制作简洁的图片轮播效果
Apr 03 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 #Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 #Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 #Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 #Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 #Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 #Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
int和Integer有什么区别
2013/05/25 面试题
食品安全责任书
2014/04/15 职场文书
婚前协议书范本
2014/04/15 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年中秋节主持词
2015/07/30 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
使用feign服务调用添加Header参数
2021/06/23 Java/Android
手残删除python之后的补救方法
2021/06/26 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python