详解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 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 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
第一个无线电台是由谁发明的
2021/03/01 无线电
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
浅谈php调用python文件
2019/03/29 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
Python获取央视节目单的实现代码
2015/07/25 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python实现按行分割文件
2019/07/22 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
企业演讲稿范文
2013/12/28 职场文书
《观舞记》教学反思
2014/04/16 职场文书
骨干教师考核方案
2014/05/09 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
工作失误检讨书范文
2015/01/26 职场文书
公司捐书倡议书
2015/04/27 职场文书
小学六一主持词开场白
2015/05/28 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书