在这篇文章中，我们来学习一下“vue中插槽的分类有几种，用法是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

vue中代码的复用, 为我们提供了 mixnis. 模板的复用, 为我们提供了 插槽( slot )

插槽的分类

默认插槽

具名插槽

作用域插槽

当我们的组件中 我们只需要插入一个 html 标签的时候, 就使用默认插槽就可以了,

如果有多个, 我们就要给第一个 插槽取一个名字, 来决定到底插入哪一个插槽

当我们的插槽中要使用组件中的数据的时候, 就可能会用到作用域插槽

下面展示一下, 默认插槽的用法

使用时

以上就是默认插槽的使用

具名插槽, 也就是说我们在组件中定一个 多个 slot , 为了分清到底作用到哪一个上面, 给插槽取一个名字来区分

使用的时候

这里说一下, vue 2.6 版本有一个新的插槽的写法, 其中要使用到 template 标签, , 我们知道 template 只是一个包裹标签, 它不会渲染到真实页面上, 新的slot 的写法就是使用到了它, 没有它还不行, 如下图

下面来说一下作用域插槽

我们来看一下, 上面的两种 插槽 展示的数据, 都是放在 插槽的使用者 About 组件的 data中的,

但是我们有时候, 使用者是不管这些数据的, 数据中从 catetory 组件中自已获取的,

使用者 About 只需要来管理 插槽中的内容的展现形式,

这时就要使用作用域插槽了

上图中, 可以看到 作用域插槽中 向使用者传递了两个数据

那个使用者是怎么接收使用的呢

以上便是 vue 的三种插槽的使用

以上就是关于“vue中插槽的分类有几种，用法是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue框架中怎么制作圆形下载进度条

  本文主要介绍了vue + element-ui + springboot 实现文件下载进度条展现功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue中nexttick有何用处？怎样使用？

  本文主要给大家介绍的是关于vue中nexttick的内容，因为Vue中的nextTick涉及到Vue中DOM的异步更新，小编觉得比较有意思，下面会有vue中nexttick的示例详解，感兴趣的朋友可以了解一下。

• jQuery怎样获取自己除外的元素？

  jQuery怎样获取自己除外的元素？在jquery中，想要实现获取自己除外的其他的元素，我们可以利用not()方法，这里还需要使用到this关键字，文中有示例代码供大家参考，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。

• 用jQuery怎样写一个查看图片的功能？

  这篇文章给大家分享的是用jQuery写一个查看图片的功能的内容，可以实现点击左右查看图片效果等等，小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• JS基础语法有哪些，具体怎么用

  本篇文章介绍了几个javascript的基本语法和maven的配置教程。想学习javascript和maven的朋友们可以参考一下，希望能给你带来帮助