文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3插槽怎么用

2023-06-22 06:14

关注

这篇文章主要为大家展示了“Vue3插槽怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue3插槽怎么用”这篇文章吧。

一、v-slot 介绍

v-slot 只能用在 template 或组件上使用,否则就会报错。

v-slot 也是其中一种指令。

使用示例:

//父组件代码 <child-com>  <template v-slot:nameSlot>   插槽内容  </template> </child-com>  //组件模板 <slot name="nameSlot"></slot> v-slot 的语法,简化 slot、slot-scope 作用域插槽的功能,相比更加强大,代码效率更高。

二、匿名插槽

当组件中只有一个插槽的时候,可以不设置 slot name 属性,v-slot 后可以不带参数,但是 v-slot 在没有设置 name 属性的插槽口也会带有隐含的 “default”。

匿名插槽使用:

//组件调用 <child-com>  <template v-slot>   插槽内容  </template> </child-com>  //组件模板 <slot ></slot>

虽然 v-slot 没有设置参数,但不能删除掉 ,否则插槽内容无法正常渲染。

三、具名插槽

一个组件中有多个插槽的时候,如果没有设置 v-slot 属性值,会默认把元素插到没有设置 name 属性值的 slot 组件中,为了把对应的元素放到指定的位置,就需要借助 v-slot name 属性,把内容对应起来。

具名插槽使用:

//父组件 <child-com>  <template v-slot:header>   头部  </template>  <template v-slot:body>   内容  </template>  <template v-slot:footer>   脚  </template> </child-com>      //子组件   <div>  <slot name="header"></slot>  <slot name="body"></slot>  <slot name="footer"></slot> </div>

具名插槽缩写:

v-slotv-bindv-on 指令一样,也存在缩写。可以把 v-slot: 简写为 # 号。

如上述 v-slot:footer 可以简写为 #footer 。

上述的父组件代码可以简化为:

<child-com>  <template #header>   头部  </template>  <template #body>   内容  </template>  <template #footer>   脚  </template> </child-com>

注意:和其他指令一样,只有存在参数时,才可以简写,否则是无效的。

四、作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时,这是一个常见的情况,我们希望能够自定义每个项目的渲染方式。

要使子组件上的属性在插槽内容上可用,需要给 slot 绑定一个属性。然后在 v-slot 处接收并定义提供插槽 props 名字。

使用示例:

// <child-com>  <template v-slot:header="slotProps">   插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }}  </template> </child-com>      //子组件代码 <template>  <div v-for="(item, index) in arr" :key="index">   <slot :item="item" name="header" :index="index"></slot>  </div> </template> <script setup>  const arr = ['1111', '2222', '3333'] </script>

五、动态插槽名

v-slot 指令参数也可以是动态的,用来定义动态插槽名。

如:

<child-com>  <template v-slot:[dd()]>   动态插槽名  </template> </child-com>  <script setup> const dd = () => {   return 'hre' }

此处使用的是函数,也可以直接使用变量。

以上是“Vue3插槽怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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