首页 > 其他分享 >Vue3_透传 Attributes

Vue3_透传 Attributes

时间:2024-12-13 17:21:58浏览次数:5  
标签:useAttrs props ctx 透传 attrs Vue3 Attributes

什么是透传Attributes

透传属性指的是 没有被该组件声明为props或emits的属性或v-on事件监听器,eg:class、style、id...

在 JavaScript 中访问透传 Attributes

// 使用useAttrs() API来访问一个组件的所有透传属性
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>

// 使用setup(props, ctx),attrs作为setup()上下文对象的一个属性暴露
export default {
  setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
  }
}

attrs 对象总是反映为最新的透传 attribute

参考:
https://juejin.cn/post/6865451649817640968#heading-3
https://cn.vuejs.org/guide/components/attrs.html

标签:useAttrs,props,ctx,透传,attrs,Vue3,Attributes
From: https://www.cnblogs.com/openmind-ink/p/18605357

相关文章

  • vue3调整el-tree样式
    vue3调整el-tree样式:deep(.el-tree){border:10px;padding:5px;background:rgba(7,36,77,0);height:calc(100%-49px)!important;color:#fff;overflow-y:auto;overflow-x:hidden;padding-right:20p......
  • Vue3+ElementPlus 中 el-image 预览大图属性 previewSrcList 和 translateY(-5px) 的
    【前言】Vue3使用ElementPlus,Vue2使用Element-ui。【问题描述】在Vue3+ElementPlus中,使用el-image和预览大图功能,点击el-image后预览的图片局限在原有图片(小图)内,遮罩也没有充满屏幕。【注】使用  transform:translateY(-5px); 的原因是本来外面有一层div,想用hover ......
  • SpringBoot3+Vue3+ArcoDesign后台管理系统源码 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ArcoDesign、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • SpringBoot3+Vue3+ArcoDesign | 小蚂蚁云
    项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ArcoDesign、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈实......
  • SpringBoot3+Vue3+NaiveUI后台搭建详细教程 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈实现......
  • SpringBoot3+Vue3+NaiveUI搭建后台系统脚手架 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈实现......
  • Vue3 tsx 和 template 之间的相互使用
    本文会介绍多种场景下的jsx和template相互使用,主要内容是插槽,包含常规slot、slot传值等场景,不涉及非常基础的jsx语法使用(类似v-for是jsx的map函数等诸如此类的不介绍),因此可能无法覆盖全面,还请多多包涵。长期写react深知其痛,这也是我司也在向vue方向靠拢,对vue......
  • 前端框架 React 与 Vue3对比 —— 技术选型
    在进行前端框架React与Vue3的技术选型对比时,我们可以从以下几个方面进行综合考虑:1.性能比较• Vue3通过Vite打包工具实现了快速的开发和构建,同时使用了响应式系统和Proxy技术来提高数据响应速度。在大部分测试用例中,Vue3比React更快,但在一些特定测试用例中,React......
  • Vue3+Nest+GraphQL+Prisma 入门全栈开发图书管理系统
    Vue3+Nest+GraphQL+Prisma入门全栈开发图书管理系统https://www.bilibili.com/video/BV1K44y197Za 101.课程介绍02.GraphQL入门-上03.GraphQL入门-中04.GraphQL入门-下05.Prisma入门-106.Prisma入门-207.Prisma入门-308.Prisma入门-409.Prisma入门-510.前端编写-上11......
  • vue3开发中常见的代码错误或者其他相关问题小文章4.0
    31. VueRouter动态路由匹配错误示例:动态路由配置不当,导致参数无法正确传递或解析。解决方案:确保正确配置动态路由,并在组件中使用$route.params来访问参数。//router/index.jsconstroutes=[{path:'/user/:id',component:User},];//在User.vue中访问......