首页 > 其他分享 >vue 插槽透传

vue 插槽透传

时间:2023-07-03 11:47:50浏览次数:37  
标签:vue scopedSlots 插槽 透传 vue2 vue3

vue2:

<template v-for="(_, name) in $scopedSlots" v-slot:[name]="data">
    <slot :name="name" v-bind="data"/>
</template>

  

vue3: 

<template v-for="name in $slots" :key="name" #[name]="data">
    <slot :name="name" v-bind="data" />
</template>

 

写法基本一样

区别:vue2 使用 $scopedSlots 来获取所有插槽,vue3 使用 $slots

标签:vue,scopedSlots,插槽,透传,vue2,vue3
From: https://www.cnblogs.com/veinyin/p/17522336.html

相关文章

  • vue+elementui实现树形结构表格且合并同一个children的单元格
    1、实现效果2、结构代码(给table添加classname)3、通过设置css实现合并同一个children的单元格.nonRelationalDatabase{//去除横向边框::v-deep.el-table__row{  td{   border-bottom:none!important;  } }//......
  • 前端Vue腾讯地图SDK Api经纬度解析为地址信息Geocoding 可用于定位经纬度信息解析为地
    前端Vue腾讯地图SDKApi经纬度解析为地址信息Geocoding可用于定位经纬度信息解析为地址, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13311效果图如下:cc-tencentGeocoding使用方法//引入腾讯地图sdkimportqqmapsdkfrom"../../util......
  • Vue学习-组件
    组件也相当于一个自定义标签,下面是一个自定义标签的一个例子:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><daitu><......
  • vue element admin 环境搭建
    安装node.js及npm参考官网node-vnpm-v项目下载#克隆项目gitclonehttps://github.com/PanJiaChen/vue-element-admin.git#安装依赖npminstall#设置淘宝仓库npminstall--registry=https://registry.npm.taobao.org#启动服务npmrundev......
  • vue2-props-required必填项
    props的required必填项<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template><script>expo......
  • 基于vue-router的matched实现面包屑功能
    如上图所示,就是常见的面包屑效果,面包屑的内容一般来说,具有一定的层级关系,就以上图为例,首先是进入首页,然后点击左侧导航,进入活动管理下的活动列表页面,然后点击某一条数据,进入活动详情页面这正好与vue-router的mached属性所获取的结果有着相似的原理,所以可以基于此来实现面包屑效......
  • vue2-props-type值类型
    在声明自定义属性时,可以通过type来定义属性的值类型。示例代码如下:<template><div><h5>Count组件</h5><p>count的值是:{{count}}</p><button@click="add">+1</button></div></template>&......
  • 使用vue3创建项目
    1.创建项目npmcreatevite@latestedu-vue–---templatevue2.安装antdnpminstallant-design-vue3.安装路由npminstallvue-router4.新建路由在src/router下新建index.js文件import{createRouter,createWebHistory}from'vue-router'importLayoutfrom'.......
  • vue的虚拟DOM
    1、作用提高性能(直接操作DOM性能低,js层操作效率高)跨平台2、虚拟DOM如何生成1、为组件编写模版-template2、模版被编译器编译渲染为函数-render3、挂载中调用render函数,返回对象就是虚拟DOM4、后续patch过程中进一步转化成真实DOM3、VDOM如何diff1、挂载过程结束,记录第一......
  • vue的理解
    vue是一个渐进式框架声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具1、声明式框架命令式与声明式区别命令式关注过程声明式关注结构//命令式letnumber=[1,2,3];lettotal=0;for(leti=0;i<number.length;i++){total+=number[i]......