vue3 与 vue2 slot插槽 对比用法（Header为例）

最新推荐文章于 2024-04-18 10:33:01 发布
最新推荐文章于 2024-04-18 10:33:01 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43991241/article/details/120798763
版权

背景介绍：

工作的时候是一直都在用vue2 + element2 写的前端，最近突然被安排做别的项目，项目已经用vue3 + elementPlus 搭的框架, 虽然核心内容都差不多，但是有些写法已被废弃，写篇文章记录一下。

vue2 写法：

<div slot="header">
    <i class="el-icon-menu"></i>
    销售明细
</div>

vue3 写法：

<template v-slot:header>
    <div>
        <i class="el-icon-menu"></i>销售明细
    </div>
</template>

注意点：

  • v-slot:header 要写在 template 标签里 ，写在 div 标签里会报错，如图所示。

最后结果：

一个好看的自带底部分割线的header

坐等夕阳落time
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中三种不同插槽使用:普通插槽,具名插槽,作用域插槽
weixin_52005030的博客
09-08 872
{ path: '/', component: User, children: [ { path: '/home', // /user/:id component: userIndex }, ] }
vue——在Vue中使用插槽：slot
weixin_54362381的博客
08-24 1537
在Vue中使用插槽：slot 1、在子组件的template里可以直接使用slot标签<slot></slot>，它可以显示父组件向子组件插入的内容。 2、slot标签里面可以写一些默认值，当父组件没有插入内容的时候它就会显示默认值，插入内容时就只显示插入的内容。 3、当使用多个slot标签时，直接插入多个内容时，每个slot标签内都会包括所有插入的内容。 可以通过slot属性给插入的不同内容设置指定的名字，然后给相应的slot标签设置相应的name属性值，就可以让该slot标签显示
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt
07-31
vue2+iview+webpack 和vue3+vben+vite的技术对比的ppt,用于解释为什么使用新技术和框架
详解vue使用插槽分发内容slot的用法
10-17
主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前端学习（2451）：表单数据的绑定
歌谣的博客
10-21 539
request.js <template> <div class="artical-container"> <!--卡片--> <el-card class="filter-card"> <div slot="header" class="clearfix"> <!--面包屑导航--> <el-breadcrumb separator-class="el-icon-arrow-rig..
手牵手学习vue之详解slot插槽
君子不器
09-04 213
什么是插槽？ 插槽就是在子组件中给父组件提供的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 普通插槽-示例 //父组件 <template> <div> <slotButton>插槽按钮</slotButton> </div> </templa..
Vue中使用插槽(slot)
qq_37117521的博客
10-15 160
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue中使用插槽(slot)</title> <script src="./vue.js"></script> </head> <body> <...
vue三种插槽的理解
xinxin7789的博客
01-05 716
vue三种插槽的理解
Vue 3.0 插槽 【Vue3 从零开始】
2201_75866484的博客
02-26 873
该页面假设你已经阅读过了。如果你还对组件不太了解，推荐你先阅读它。
vue插槽slot的简单理解与用法实例分析
10-15
主要介绍了vue插槽slot的简单理解与用法,结合实例形式分析了vue插槽slot的功能、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
vue中的 $slot 获取插槽的节点实例
10-16
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue初步使用
海角12138的博客
11-21 149
1--导入element-ui设置： 在vue的项目中进行导入：npm i element-ui -S element-ui官网如下：https://element.eleme.cn/#/zh-CN/component/installation 成功之后：文件中会增加一个这个： 2---在main.js中增加其配置： 3---新建所需要的页面：在组件目录下新建Login.vu...
vue3中slot插槽的使用
dreamingbaobei的博客
02-21 5966
slot又称插槽,通常用于父子组件之间，用于父组件向子组件`传递模板内容`，在子组件中可以设定可以放置插槽的名称和要传递给父组件的子组件数据，在父组件中向子组件通过指令声明插槽和接收子组件传递的数据。
vue 插槽（slot）v-slot 使用
半半的博客
12-03 1355
插槽是什么？ 官方解释 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。 通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。 基本用法 现在，有两个组件，A与B，分别如下： A.vue <template> <div> <p>我是A组件</p>
Vue 中 slot 插槽的使用
人与人之间最小的差别是智商，最大的差别是坚持。
08-13 190
<!-- slot.vue--> <!-- 通过name属性指定具名插槽，没有name属性的为默认插槽--> <slot name="header">我是header</slot> <slot name="main">我是main</slot> <slot :title="title" name="footer"></slot> <slot></slot> //.
基于Vue的电商后台管理系统（2）
wish_way的博客
07-14 1029
基于Vue的电商管理系统(2) 上一节已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能，本期将继续完善该系统的以下功能：从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。 后台页面布局 1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 本系统后台将采用Element UI 中的Container布局容器。 基本结构如下： ...
vue3中组件间通信之插槽（slot）
limif的博客
10-08 2651
（slot）：组件中的模板会覆盖组件中的原始内容（即自定义标签对内部的内容会不显示），使用插槽可以使自定义标签内容显示；1.匿名插槽（单个插槽）：（无name属性）2.具名插槽：（有name属性）：父组件提供内容，子组件中展示。3.作用域插槽（带数据插槽）
Vue.js（自定义指令）
最新发布
Luo3255069063的博客
04-18 433
【代码】Vue.js（自定义指令）
vue2中slot插槽
12-03
在Vue2中，插槽分为默认插槽和具名插槽两种类型。默认插槽是没有名字的插槽，可以在组件中使用`<slot>`标签定义。具名插槽则需要在`<slot>`标签上添加`name`属性来定义插槽的名字。当组件中存在多个具名插槽时，需要在父组件中使用`<template>`标签来指定插槽的名字。 下面是一个使用默认插槽和具名插槽的Vue2组件示例： ```vue <template> <div> <h2>默认插槽示例</h2> <slot></slot> <h2>具名插槽示例</h2> <slot name="header"></slot> <slot name="body"></slot> </div> </template> <template> <div> <h2>使用组件</h2> <my-component> <p>这是默认插槽的内容</p> <template v-slot:header> <h3>这是具名插槽header的内容</h3> </template> <template v-slot:body> <p>这是具名插槽body的内容</p> </template> </my-component> </div> </template> ``` 在上面的示例中，`<slot>`标签用于定义默认插槽和具名插槽。在使用组件时，可以使用`<template>`标签来定义具名插槽的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值