Vue - $attrs 的多种用法

最新推荐文章于 2025-11-11 14:43:17 发布
最新推荐文章于 2025-11-11 14:43:17 发布
阅读量439 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/KwyxLibrary/article/details/133582991
前端 专栏收录该内容
177 篇文章 ¥59.90 ¥99.00
订阅专栏
Vue的$attrs属性用于传递父组件中未被子组件识别的属性，实现灵活的数据通信。本文详细介绍了如何使用$attrs传递所有属性、过滤属性和事件处理函数，帮助开发者更好地理解和应用这一特性。

在Vue前端开发中，attrs是一个非常有用的属性，用于传递父组件中未被子组件所识别的属性。它提供了一种方便的方式来在组件之间传递数据，使得组件的通信更加灵活和可扩展。本文将详细介绍attrs是一个非常有用的属性，用于传递父组件中未被子组件所识别的属性。它提供了一种方便的方式来在组件之间传递数据，使得组件的通信更加灵活和可扩展。本文将详细介绍attrs是一个非常有用的属性，用于传递父组件中未被子组件所识别的属性。它提供了一种方便的方式来在组件之间传递数据，使得组件的通信更加灵活和可扩展。本文将详细介绍attrs的几种常见用法，并提供相应的源代码示例。

  1. 传递所有属性

$attrs属性最常见的用法是将父组件中的所有属性传递给子组件。这在开发过程中非常实用，因为它允许我们将父组件的属性传递给子组件，而无需在子组件中显式声明这些属性。


                

                
                
        

    



  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
【Vue3】组件通信之$attrs

				
			

			

				

					又言又语
				

				

					08-04
					
					1567
					
				

			

		

		

			
				
本文介绍 Vue3 中如何使用$attrs实现父组件向子组件的子组件传数据，即向其孙子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件与子组件的子组件互传数据，即与孙子组件互传数据$attrsproviderinject任意组件间传数据mittPinia$attrs的作用其实是对props。

			
		

	



                

            
              



	

		

			

				
					
$attrs 和 $listeners (vue2&&vue3)

				
			

			

				

					每天都要努力学习哦~~
				

				

					10-09
					
					8668
					
				

			

		

		

			
				
listeners。

			
		

	



              


  
              

                


	

		

			

				
					
Vue 中 $attrs 深度解析：从使用到原理

					
最新发布

				
			

			

				

					u011265143的专栏
				

				

					11-11
					
					879
					
				

			

		

		

			
				
`$attrs` 是 Vue 实例的一个内置属性，它包含了父组件传递给子组件的所有属性（attribute bindings），但不包括那些被子组件显式声明为 `props` 或 `emits` 的属性。

			
		

	





	

		

			

				
					
Vue3中的常见组件通信之$attrs

				
			

			

				

					m0_63165331的博客
				

				

					06-09
					
					2684
					
				

			

		

		

			
				
本文讲述vue3中间组件通信$attrs的用法。

			
		

	



		

			
		



	

		

			

				
					
vue中$attrs的使用

				
			

			

				

					我的博客简介
				

				

					07-29
					
					459
					
				

			

		

		

			
				
attrs以下是$attrs的使用示例父组件的列表行数据传递给孙子组件展示1.父组件（Father.vue）给子组件关联数据，子组件如果不用props接收，那么这些数据就作为普通的HTML特性应用在子组件的根元素上2.儿子组件（Child.vue）中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加v-bind=“$attrs”，这样孙子组件才能接收到数据3.孙子组件（GrandChild.vue在孙子组件中一定要使用props接收从父组件传递过来的数据结果。...

			
		

	





	

		

			

				
					
Vue中$attrs的作用和使用方法

				
			

			

				

					qq_39454432的博客
				

				

					04-12
					
					1934
					
				

			

		

		

			
				
Vue中 $attrs 的作用和使用方法

			
		

	





	

		

			

				
					
vue中通过使用$attrs实现组件之间的数据传递功能

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue.js中，组件间的通信是其核心特性之一，提供了多种数据传递方法，如props、vuex、Vue Event Bus等。然而，在某些情况下，我们可能需要更简洁的方式来传递非prop属性，这时`$attrs`就派上用场了。`$attrs`是在...

			
		

	





	

		

			

				
					
Vue组件通信$attrs、$listeners实现原理解析

				
			

			

				

					10-14
				

			

		

		

			
				
1. **组件传值**：当祖父组件向父亲组件传递数据，而这些数据需要进一步传递给孙子组件，并且孙子组件需要调用祖父组件的方法时，可以利用 `$attrs` 获取未声明的属性并使用 `$listeners` 传递事件监听器。...

			
		

	





	

		

			

				
					
Vue2利用$attrs和$listeners属性实现el-select透传封装

				
			

			

				

					黄彪博客
				

				

					09-19
					
					553
					
				

			

		

		

			
				
最近因工作需要开发一个select组件，如下图所示，如果自己开发肯定会很麻烦，因此最快捷的方式就是基于element-ui去调整样式，在整改的过程遇到了一些问题，用次博客记录方便后面自己学习
好的，这是一个非常经典的 CSS 问题。让我直接给出核心答案，然后详细解释各种方法。在纯 CSS 中，无法直接通过子元素来选择其父元素。 CSS 的选择器是从父元素向子元素方向解析的，不能反向查询。但是，有几种方法可以实现类似「根据子元素状态影响父元素样式」的效果：这是最直接、最现代的解决方案，被称为 “父选择器”。


			
		

	





	

		

			

				
					
Vue3透传 Attributes（$attrs）深度解析

				
			

			

				

					monk all the way
				

				

					05-08
					
					1042
					
				

			

		

		

			
				
父组件传递给子组件，但未被props或emits声明的属性包括：class和style普通 HTML 属性（如iddata-*原生 DOM 事件监听器（如@click。

			
		

	





	

		

			

				
					
vue $attrs的使用

					
热门推荐

				
			

			

				

					YM123456999的博客
				

				

					11-25
					
					1万+
					
				

			

		

		

			
				
作为一个前端开发，vue这个框架的使用是必不可少的。组件通讯是必不可少的，比如：子传父、父传子、非父子传参等等。
一般复杂一点的项目都会涉及到多层传参，刚使用vue不久的我是通过props一层一层往下传的，这样有个问题就是代码量大，可维护性不强。vuex也可以解决这个问题，但是感觉有点杀鸡用牛刀的感觉，大材小用。后面vue出了一个方法$attrs专门解决这个问题

$attr：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件

			
		

	





	

		

			

				
					
【Vue】Vue3.0（二十三）Vue3.0中$attrs 的概念和使用场景

				
			

			

				

					qq_39666711的博客
				

				

					11-12
					
					1432
					
				

			

		

		

			
				
组件不需要处理这些属性，实现了在电商应用场景下组件间属性的合理传递。接收的属性，以便在组件内部或继续向下传递给更深层的子组件时使用。//测试一下在自己的组件中只定义的变量是否会被放在$attrs中。是一个组件实例属性，它包含了父组件传递给子组件的所有非。当父组件向子组件传递数据时，属性是指那些父组件传递过来但子组件没有通过。组件会接收到一些关于产品的通用属性，如。组件（产品页面组件），它包含一个。组件（产品详情组件）和一个。组件并不需要使用这些属性。组件（产品评论组件）。等，这些属性需要传递给。

			
		

	





	

		

			

				
					
Vue中的$attrs

				
			

			

				

					weixin_45403802的博客
				

				

					01-23
					
					3423
					
				

			

		

		

			
				
今天产品经理要求做保留某组件全部功能，还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法，但是想一下怎么只用少量代码高效的二次封装组件呢。

			
		

	





	

		

			

				
					
Vue的$attrs使用

				
			

			

				

					前端程序猿的博客
				

				

					12-01
					
					554
					
				

			

		

		

			
				
我们在使用组件的过程中，有时需要给被封装的子组件传递Prop，如果prop的值过于庞大写起来会很麻烦，$attrs就解决了这一问题


//父组件
<template>
  <div class="home">
    <About :msg="msg"></About>
  </div>
</template>

<script>
import About from '@/views/About'
export defau

			
		

	





	

		

			

				
					
【vue】vue中的 v-bind=“$attrs“和v-on=“$listeners“：

				
			

			

				

					SunPeng的博客
				

				

					09-18
					
					1667
					
				

			

		

		

			
				
【vue】vue中的 v-bind="$attrs"和v-on="$listeners"：

			
		

	





	

		

			

				
					
vue组件传值之$attrs

				
			

			

				

					mez_Blog的博客
				

				

					10-18
					
					1308
					
				

			

		

		

			
				
然后我们可能会有疑问，既然爷爷可以向孙组件传递数据，那么孙可不可以修改爷爷的数据呢，其实，原理和当时的props是一样的，这种方式虽然不能直接修改爷爷的值，但是可以让爷爷再传递一个方法给孙组件，然后孙组件调用这个方法，完成对爷爷的修改。这样我们就可以看到对应的x和y也被传递过来了，然后我们的关注重点是祖孙传值，而不是父子传值，所以这个brother组件就是一个桥梁，其作用就是不使用父组件的值，直接将父组件传递的值使用$attrs直接传递给孙组件。来到界面，我们点击按钮，就可以修改爷爷的数据。

			
		

	





	

		

			

				
					
$attrs和$listeners的使用(VUE)

				
			

			

				

					qq_46620208的博客
				

				

					09-21
					
					355
					
				

			

		

		

			
				
父组件向孙组件传递数据的方法

			
		

	





	

		

			

				
					
记录--Vue中的$attrs你真的会用吗？

				
			

			

				

					林恒的博客
				

				

					01-23
					
					1856
					
				

			

		

		

			
				
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助


先来看一个业务需求：
项目经常会遇到产品经理要求你做某组件一样的功能，还要在它的基础上增加东西。如何只用少量代码高效的二次封装组件呢？
例如我要做一个element-ui的input组件进行封装，以下是封装要求：

对el-input组件增加某些定制功能
调整el-input的原有css样式
封装后不得更改原有el-input的所...

			
		

	





	

		

			

				
					
vue2 $attrs如何绑定input输入框的值

				
			

			

				

					01-21
				

			

		

		

			
				
### Vue2 中使用 `$attrs` 绑定 `input` 输入框的值

在 Vue 2.x 版本中，组件可以利用 `$attrs` 来接收父级传递给子组件的所有属性（除了那些被声明为 props 的）。对于表单元素来说，这允许更灵活的数据绑定方式。

当处理 `<input>` 或其他原生 HTML 表单控件时，可以通过组合使用 `$attrs` 和事件监听来实现数据同步。具体做法如下：

#### 实现方法

创建一个自定义组件并设置其行为以便能够响应来自外部传入的属性以及更新这些属性所关联的状态变量。下面是一个具体的例子说明如何操作：

```html
<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <!-- 将所有未声明为 prop 的 attribute 转发给 ChildInput 组件 -->
    <ChildInput v-bind="$attrs" />
  </div>
</template>

<script>
import ChildInput from './ChildInput.vue';

export default {
  components: { ChildInput },
};
</script>
```

在这个案例里，任何附加到 `<ChildInput />` 上面但是并没有作为显式 prop 定义好的特性都会自动转发至该子组件内部。

接着，在子组件内我们需要确保能正确接收到并通过某种机制反映回父组件的变化情况：

```html
<!-- ChildInput.vue -->
<template>
  <div class="child-input-wrapper">
    <label>Custom Input:</label>
    <input
      :value="internalValue"
      @input="handleInputChange"
      v-bind="$attrs" /* 这里绑定了所有的 attrs */
    />
  </div>
</template>

<script>
export default {
  inheritAttrs: false, // 防止默认应用未知属性到根节点上
  computed: {
    internalValue() {
      return this.$attrs.value || ''; // 获取 value 属性，默认为空字符串
    }
  },
  methods: {
    handleInputChange(event) {
      const newValue = event.target.value;
      
      // 更新当前实例上的本地状态 (如果有的话), 并通知父组件变化.
      this.$emit('input', newValue); // 发射 input 事件携带新的值
      
      // 如果有 update:value 事件则发射它用于 v-model 双向绑定场景下
      if ('update:value' in this.$listeners) {
        this.$emit('update:value', newValue);
      }
    }
  }
}
</script>
```

上述代码片段展示了怎样在一个名为 `ChildInput` 的子组件中运用 `$attrs` 接收由父组件传递过来的各种属性，并且保持与之对应的输入字段之间的同步关系[^1]。

为了使这个过程更加直观易懂，还可以考虑加入一些样式调整或其他交互逻辑，不过核心概念已经体现在以上示例之中了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值