分享好友 前端技术首页 频道列表

Vue透传Attributes使用解析

vue  2023-03-08 21:430

透传是vue中一种特性,官方的解释是:“透传 attribute”指的是传递给一个组件,却没有被该组件声明为 props emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 classstyleid。这句话解释过来就是一些不被prop定义的属性直接添加到子组件上的时候,子组件是可以获取到的,只不过获取的方式是通过方法获取的,下面我们展开说一下

几个特性:

  • 透传的属性只会直接传给单根节点的组件,如果子组件不是一个根节点,那么透传属性会直接失效,并且警告
  • 子节点如果不是单根节点的时候,可以通过添加v-bind=“$attrs” 的属性进行某一个dom元素的透传
  • 透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主
  • 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面
  • 透传的子组件里面如果只有一个根节点,这个根节点是另一个组件的时候,透传的属性会直接传递给他本身的子组件
  • 透传过去的属性ID获取需要在dom节点加载结束进行,否则是获取不到的

以上特性我们挨个说一下

透传的属性只会直接传给单根节点的组件 子组件attrs

Vue透传Attributes使用解析

父组件

Vue透传Attributes使用解析

Vue透传Attributes使用解析

这个时候效果是没问题的,但是如果我们给子组件添加一个节点

Vue透传Attributes使用解析

Vue透传Attributes使用解析

这个时候self-btn的样式并没有传递出去,因为和这个时候他并不知道要传递给哪一个dom元素,同时会曝这样一条警告

Vue透传Attributes使用解析

子节点如果不是单根节点的时候,可以通过添加v-bind=“$attrs” 的属性进行某一个dom元素的透传

这个时候我们给其中一个添加上v-bind="$attrs"属性

Vue透传Attributes使用解析

Vue透传Attributes使用解析

此时的警告也没有了,通过这样的方式我们可以进行自己决定透传给哪一个dom元素

透传过去的属性如果和子组件上的命名重复了,会以子组件本身的属性为主 透传过去的属性如果和子组件上的属性重复了,会直接添加到属性值的后面

这两个通过上面的例子相信你们已经看出来了,这里就不做演示了

透传的子组件里面如果只有一个根节点,这个根节点是另一个组件的时候,透传的属性会直接传递给他本身的子组件

我们在子组件中再引入另一个组件进行尝试 : deepAttrs

Vue透传Attributes使用解析

Vue透传Attributes使用解析

Vue透传Attributes使用解析

透传过去的属性ID获取需要在dom节点加载结束进行,否则是获取不到的

既然可以透传属性,那么我们传递过去的ref和id理论上也是可以直接被获取到的,代码尝试一下

Vue透传Attributes使用解析

Vue透传Attributes使用解析

Vue透传Attributes使用解析

可以看到上面打印的结果是可以获取到的,但是如果是直接获取的话,dom元素是null,也就是直接获取的话,会因为dom加载顺序的问题导致获取不到最后的dom,这里需要注意一点

可能存在的疑问 如果我子组件只有一个根节点,但是我不想被透传怎么办呢?

Vue透传Attributes使用解析

如上所示,我们给js模块部分添加 inheritAttrs:false即可,默认的值是true,设置为false的时候透传的属性久不存在了

我怎么在js中获取到透传的属性呢?

Vue透传Attributes使用解析

Vue透传Attributes使用解析

使用useAttrs即可获取到对应的透传过来的属性

如果我不适用setup的语法糖进行呢?

Vue透传Attributes使用解析

这里直接使用官网的例子给解答

原文地址:https://blog.csdn.net/qq_41485414/article/details/128812451

查看更多关于【vue】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
vue3+TS 自定义指令:长按触发绑定的函数
vue3+TS 自定义指令:长按触发绑定的函数而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢。编写自定义指令时遇到的几个难点1.自定义指令的类型在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存

0评论2023-03-08326

基于ZR.VUE 前端的改造,页面刷新报错
 问题描述:前后端分离开发,分开部署. 页面刷新 直接报404 错误的解决办法提示:  先在 .env.development 中 配置 VUE_APP_BASE_API , 将 '/' 替换为 后端地址 'http://localhost:8888/'如果是对应的发布的正式环境,也要修改  .env.production 的VUE_APP_

0评论2023-03-08677

Vue3 企业级优雅实战 - 组件库框架 - 9 实现组件库 cli - 上
上文搭建了组件库 cli 的基础架子,实现了创建组件时的用户交互,但遗留了 cli/src/command/create-component.ts 中的 createNewComponent 函数,该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。(友情提示

0评论2023-03-08947

vue-3 this概念
一、this概念官方是这样说的:在 setup()内部,this 不会是该活跃实例的引用因为 setup() 是在解析其它组件选项之前被调用的,所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同这在和其它选项式 API 一起使用 setup() 时可能会导致混淆啥意思呢

0评论2023-03-08538

Vue3+TypeScript 项目中,配置 ESLint 和 Prettier
接上篇:从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios文档同步项目gitee:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 一、Eslint:用于检测代码安装eslint相关依赖yarn add eslint eslint-plugin-vue @typescript-esli

0评论2023-03-08825

Vue中四种操作dom方法保姆级讲解 vue中如何操作dom
目录前言一、通过ref拿到dom的引用适用场景示例代码二、通过父容器的ref遍历拿到dom引用适用场景示例代码三、通过子组件emit传递ref适用场景示例代码四、通过:ref将dom引用放到数组中适用场景示例代码前言最近主管提出了许多优化用户体验的要求,其中很多涉及

0评论2023-03-08944

Vue状态管理工具Vuex工作原理解析 vuex五种状态
目录一、什么是vuex二、vuex的工作方式三、vuex的使用场景四、工作流程五、vuex的核心API六、应用七、vuex的工作流程一、什么是vuexVuex是vue项目的状态管理器(状态管理工具)。vue项目的状态是通过vue实例(组件)绑定的变量来体现。所以也可以说vuex是用来管理

0评论2023-03-08859

更多推荐