vue中的插槽详解

2022-04-15 0 649

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

插槽的分类

默认插槽

具名插槽

作用域插槽

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

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

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

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

vue中的插槽详解

使用时

vue中的插槽详解

以上就是默认插槽的使用

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

vue中的插槽详解

使用的时候

vue中的插槽详解

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

vue中的插槽详解

下面来说一下作用域插槽

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

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

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

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

vue中的插槽详解

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

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

vue中的插槽详解

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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注NICE源码的更多内容!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript vue中的插槽详解 https://www.niceym.com/26250.html