文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue的插槽原来该这样理解

2024-04-02 19:55

关注

一、认识插槽Slot

前面我们会通过props传递给组件一些数据,让组件来进行展示,但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素,比如某种情况下我们使用组件,希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片,我们应该让使用者可以决定某一块区域到底存放什么内容和元素。所以有了插槽的存在,我们可以提高组件的复用性,并且也提高组件的灵活性。

二、插槽的基本使用

直接在其中使用<slot></slot>

在这里插入图片描述

在这里插入图片描述

三、插槽的默认内容

在这里插入图片描述

在这里插入图片描述

如果想要设置插槽的默认内容,可以直接在<slot></slot>标签内添加内容。

四、多个插槽实现的效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如上图所示,如果在组件之间设置多个标签,则会在该组件的每一个插槽中都添加多个标签。

在这里插入图片描述

在这里插入图片描述

如上面代码所示:在组件中的每一个<slot></slot>中使用name属性设置插槽名,并且组件中间使用template标签并且设置v-slot:属性名来进行一一对应。

在这里插入图片描述

五、动态插槽

有时候我们的插槽名称不固定,需要从外界传入,这是就需要使用动态插槽。

在这里插入图片描述

在这里插入图片描述

如上图所示,我们在<slot></slot>中动态绑定属性名,该属性为通过props传入的,我们在外部,通过v-slot:[na]来动态绑定属性。

六、具名插槽的缩写

在这里插入图片描述

如上图所示,具名插槽的v-slot:left可以缩写为#left

七、渲染作用域

父级模板的所有内容在父级模板中编译。
子级模板的所有内容在子集模板中进行编译。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

如图所示,父组件中存在title,子组件中也存在title,但是最终显示的是父组件的title属性。

八、作用域插槽的案例

在这里插入图片描述

这里在父组件中的data中设置数组数据,并将其通过props传递给组件内部,子组件拿到数组后,通过for循环遍历数组中的每一项内容,并且将数据通过v-bind绑定到slot标签上,然后在父组件可以通过v-slot:default="data",这个data变量就是数据。

九、独占默认插槽缩写

在这里插入图片描述

在这里插入图片描述

上面是作用域插槽的完整写法

下面可以将其改写为:

在这里插入图片描述

也可以改写为:

在这里插入图片描述

十、默认插槽和具名的混合

作用域插槽案例可以改写为:

在这里插入图片描述

总结

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯