【Vue第十七章】透传 Attributes及其使用场景

已于 2023-09-14 10:31:25 修改
阅读量838 收藏 6
点赞数 4
分类专栏： Vue 前端开发知识 文章标签： vue.js javascript 前端
于 2023-02-01 17:48:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39335404/article/details/128837950
版权

文章目录

前言

透传 attribute指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、根组件继承

默认情况下，当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上（直接自动继承）。

MyButton 组件模板

<template>
	<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
MagnumHou
关注
专栏目录
订阅专栏
Vue3 透传 Attributes 父组件向子组件传class为例
朝花夕拾的博客
06-08 585
这样可以显示两个弹窗样式 一个有文件时的 一个没有文件时的样式。不符合条件不会添加这个divbox。divbox类样式深度渲染。
Vue3【组件传递（数据_Props、多种数据类型、Props效验 ）组件事件(配合 v-model 使用 、组件数据传递、透传 Attribute) 】(四)-全面详解（学习总结---从入门到深化）
03-26 955
Vue3【组件传递（数据_Props、多种数据类型、Props效验 ）组件事件(配合 v-model 使用 、组件数据传递、透传 Attribute) 】(四)-全面详解（学习总结---从入门到深化）
vue中非 prop 的 Attribute处理
ahq2018的博客
03-10 204
项目场景： vue-cli搭建的单页面应用 问题描述 父组件通过prop将数据传递给子组件, 偶然遇到父组件传递了多个数据, 但是子组件只能接受其中一些的情况, 示例代码如下: <template> <div class="father"> 父组件 <son :data01="data01" :data02="data02" /> </div> </template> <script> import son
Vue的透传 Attributes
最新发布
qq_36349443的博客
04-25 1530
Vue的透传是一种有用的模式，可以在特定场景下简化组件之间的通信。然而，它并不是所有情况下的最佳选择，需要根据具体的应用场景和需求来决定是否使用。
Vue 透传 Attributes：优雅处理组件间通信
Kuangtian的博客
12-19 1042
Vue 的透传 Attributes 为组件通信提供了一种清晰而优雅的解决方案。通过简化父子组件之间的关系，提高子组件的独立性，透传 Attributes 提升了代码的可读性和可维护性。在实际开发中，开发者可以根据具体需求灵活运用透传 Attributes，结合其他通信方式，构建出更加强大和灵活的 Vue 应用。透传 Attributes，让组件通信更加简单而高效。
Vue-透传Attributes使用解析
红岸基地
01-31 2082
透传是vue中一种特性，官方的解释是：“透传 attribute”指的是传递给一个组件，却没有被该组件声明为或的 attribute 或者v-on事件监听器。最常见的例子就是classstyle和id。这句话解释过来就是一些不被prop定义的属性直接添加到子组件上的时候，子组件是可以获取到的，只不过获取的方式是通过方法获取的，下面我们展开说一下以上特性我们挨个说一下。
Vue3中的透传Attributes / $attrs：简化组件开发的利器
有事儿私信。
07-19 5124
Vue3推出了一系列新功能和改进。使用下来后，其中一个很实用的新特性就是透传 Attributes（透传属性）。本文将介绍 Vue3中的透传 Attributes，并提结合代码示例来展示它在实际项目中的使用。
vue透传attributes
08-16
在Vue中，透传attributes是指将除了props和emits之外的其他attribute传递给子组件。通过使用$attrs对象来访问这些透传的属性。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[....
【vue】vue2中attribute继承不存在事件继承，但vue3中存在事件继承
欢迎来到C-Homes
12-06 499
<date-picker @change="submitChange"></date-picker> app.component('date-picker', { created() { console.log(this.$attrs) // { onChange: () => {} } } }) 当有一个具有 change 事件的 HTML 元素将作为 date-picker 的根元素时，这可能会有帮助。 app.component('date-pick
vue 透传 Attributes
lin2785的博客
08-10 225
透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者v-on事件监听器。最常见的例子就是classstyle和id。
透传 Attributes
ShenWangNian的博客
07-19 938
需要注意的是，虽然这里的 attrs 对象总是反映为最新的透传 attribute，但它并不是响应式的 (考虑到性能因素)。我们想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。这里，<MyButton> 并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了 <MyButton> 的根元素上。中的 <MyButton> 组件例子。
Vue3:透传 Attributes
weixin_62364503的博客
10-07 1581
Vue3:Attributes，一般情况下使用在插槽中，其中在使用多个插槽嵌套的情况下使用
Vue属性透传（Attributes）
qq_50686203的博客
04-07 1244
vue中的透传相关知识点
vue3中的透传Attributes，带你吃透。
m0_74656262的博客
03-26 1505
vue3中的透传Attributes，带你吃透。
Vue小知识点补充——Attribute、动态绑定、计算属性、事件处理、生命周期
m0_62861576的博客
06-28 1034
数据的绑定在class和style的绑定上非常常见，所以我们可以使用v-bind的方式来绑定HTML的attribute，也可以使用其他的方式，绑定的表达式的值可以是字符串、对象或者数组。我们知道，双大括号{{}}的写法，可以将数据解释为纯文本，但是是不能动态绑定HTML的attributes的，要想绑定attribute就需要用v-bind指令。文档里面默认介绍的是选项式API，使用了data选项来声明组件的响应式状态，它会返回一个对象的函数，此对象可以用this调用。中的方法绑定了永远指向组件实例的。
对透传 Attributes 的理解
小草莓的博客
10-09 239
例如，不管父组件传入的属性 allow-clear 是 true 还是 false，生效的都是 true。指的是将在父组件中定义的属性会传递给子组件，子组件中不需要声明 props 或者 emit。指的是将在父组件中定义的属性会传递给子组件，不需要在子组件中声明 props。若子组件的根元素上已经有了 class 属性，那它会和从父组件上继承的值。这些透传进来的 attribute 可以在模板的表达式中直接用。如果父组件传入属性，子组件中声明了相同的属性。访问一个组件的所有透传 attribute；
vue3+ts深入组件（三）透传Attributes
Asen-coder的博客
11-26 1763
本节内容作为父子组件传参的补充内容透传Attributes ，一般用来在父子组件中传递属性例如，class，style，id…且该值不会被组件当作prop或者emits。透传Attributes,也可以用来传递v-on事件监听器（例外情况下文讲解）如果根元素本来就存在class，将会！！
vue(透传属性,$attrs)
qq_43259860的博客
01-16 804
可以看到根元素就不会有两个属性了，但是无论这个参数是true还是false我们都可以通过$attrs来访问透视传递的属性。FirstLevel组件没有用props去申明name和age，所以这两个属性会透视传递。可见第二层组件也收到了透视属性，第三次亦是如此，
关于vue组件透传。（$attrs,$listeners）
qq9480的博客
02-14 2354
vue组件透传。（$attrs,$listeners），及其简单运用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MagnumHou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值