浅析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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JavaScript 序列化对象实现代码
Dec 18 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 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 CURL获取cookies模拟登录的方法
2013/11/04 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
基于jQuery拖拽事件的封装
2020/11/29 jQuery
用python删除java文件头上版权信息的方法
2014/07/31 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python删除过期log文件操作实例解析
2018/01/31 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
运动会方阵口号
2014/06/07 职场文书
走进敬老院活动总结
2014/07/10 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
人民币符号
2022/02/17 杂记