vue中的插槽详解
更新时间：2021年10月18日 16:33:45 作者：A黄俊辉A
这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot )
插槽的分类
默认插槽
具名插槽
作用域插槽
当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了,
如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽
当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽
下面展示一下, 默认插槽的用法
使用时
以上就是默认插槽的使用
具名插槽, 也就是说我们在组件中定一个 多个 slot , 为了分清到底作用到哪一个上面, 给插槽取一个名字来区分
使用的时候
这里说一下, vue 2.6 版本有一个新的插槽的写法, 其中要使用到 template 标签, , 我们知道 template 只是一个包裹标签, 它不会渲染到真实页面上, 新的slot 的写法就是使用到了它, 没有它还不行, 如下图
下面来说一下作用域插槽
我们来看一下, 上面的两种 插槽 展示的数据, 都是放在 插槽的使用者 About 组件的 data中的,
但是我们有时候, 使用者是不管这些数据的, 数据中从 catetory 组件中自已获取的,
使用者 About 只需要来管理 插槽中的内容的展现形式,
这时就要使用作用域插槽了
上图中, 可以看到 作用域插槽中 向使用者传递了两个数据
那个使用者是怎么接收使用的呢
以上便是 vue 的三种插槽的使用
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
相关文章
本文主要介绍了Vite性能优化之分包策略的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最近在项目中使用了ElementUI的el-autocomplete,下面这篇文章主要介绍了vue中el-autocomplete支持分页上拉加载功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
混入（Mixin）是 Vue 中一种代码复用的模式,允许将组件的选项抽离为独立模块,下面就跟随小编一起来深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
antd配置config-overrides.js文件的操作
这篇文章主要介绍了antd配置config-overrides.js文件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要给大家介绍了关于vue实现tab切换的3种方式及切换保持数据状态的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了element 动态合并表格的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了使用vxe-table合并单元格后增加选中效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇文章主要介绍了在vscode里使用.vue代码模板的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vue中v-for和v-if不能在同一个标签使用的最新解决方案
这篇文章主要介绍了vue中v-for和v-if不能在同一个标签的最新解决方案,这里描述了两种解决方案，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
我们对Vue中data数据的修改会导致界面对应的响应变化，而通过nextTick方法，可以在传入nextTick的回调函数中获取到变化后的DOM，讲起来可能还是有点梦幻，下面我们直接使用nextTick体验一下效果2022-08-08
最新评论