浅析vue插槽和作用域插槽的理解
更新时间：2019年04月22日 10:20:58 作者：清风了了
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下
插槽：
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不现实、以及怎样显示由父组件来决定。
插槽模板是slot，它是一个空壳子，因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高，更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。
这个可以参考https://www.jb51.net/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插槽和作用域插槽的理解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了解决vue-element-admin中配置跨域出现的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
下面小编就为大家介绍一下vue 自定义全局方法,在组件里面的使用。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue form表单动态添加组件实战案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了加速vue组件渲染之性能优化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。这篇文章主要介绍了在nginx上部署vue项目(history模式),需要的朋友可以参考下2017-12-12
贪吃蛇游戏想必是很多70、80后的回忆，一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了vue3系统进入页面前的权限判断和重定向方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件)，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了vue嵌入本地iframe文件并获取某元素的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了使用vite构建vue3项目的方法步骤，vite支持性肯定比传统的打包工具好，下面我们就来介绍一下使用vite构建vue3项目，感兴趣的可以参考一下2023-05-05
最新评论