官方文档说明:

一、解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。

意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通过$attrs接受,且只包含父组件没有在props里声明的值。

父组件

<template>
<div class="home">
<child gender="male" age="18"/>
</div>
</template> <script>
import Child from '../components/Child' export default {
name: 'home',
components: {
Child,
}
</script>

子组件

<template>
<div>
-----------------Child------------------
<br>
<span>gender: {{$attrs['gender']}}</span>
<br>
<span>age: {{$attrs['age']}}</span>
<br>
</div>
</template> <script>
export default {
name: 'Child'
}
</script> <style> </style>

结果图:


二、解释当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

意思就是: $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。引申说明一下,如果组件的嵌套层级有点深但又不那么深,比如三层。我们如果使用props的话,最里面的组件想要获取最外层组件的数据,就要通过中间的组件的props来传递,但是这个props对于中间的这个组件没啥用处,它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到。这种场景,写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们,不必在中间组件中写props就可以让最里面的组件拿到最外面组件传进来的数据。

爷组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<father :child2Data="`${child2Data}`"/>
</div>
</template> <script>
import Father from '../components/Father' export default {
name: 'home',
components: {
Father
},
data() {
return {
child2Data: '我是爷爷组件数据'
}
}
}
</script>

父组件

<template>
<div>
*********************father********************
<child2 v-bind="$attrs"/>
</div>
</template> <script>
import Child2 from '../components/Child2';
export default {
name: 'Father',
components: {
Child2
}
}
</script> <style> </style>

子组件

<template>
<div>
====================Child2==================
<br>
<span>{{child2Data}}</span>
</div>
</template> <script>
export default {
name: 'Child2',
props: {
child2Data: String
}
}
</script> <style> </style>

结果图

1、

2、

3、


官方文档:

解释:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

如下例子: 父组件的click事件包含了其父亲组件(即爷组件)的作用域

爷组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<father @click="handleBtnClick"/> // 注意此处为click事件
</div>
</template> <script>
import Father from '../components/Father' export default {
name: 'home',
components: {
Father
},
data() {
return {
child2Data: '我是爷爷组件数据'
}
},
methods: {
handleBtnClick() {
alert(this.child2Data)
}
}
}
</script>

父组件

<template>
<div>
*********************father********************
<button v-on="$listeners">父组件</button>
</div>
</template> <script>
import Child2 from '../components/Child2';
export default {
name: 'Father',
components: {
Child2
}
}
</script> <style> </style>

解释:它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

如下例子:

爷组件

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<br>
<father :child2Data="`${child2Data}`" @handle="handleBtnClick"/> // 自定义一个handle点击指令
</div>
</template> <script>
import Father from '../components/Father' export default {
name: 'home',
components: {
Father
},
data() {
return {
child2Data: '我是爷爷组件数据'
}
},
methods: {
handleBtnClick() {
alert(this.child2Data)
}
}
}
</script>

父组件

<template>
<div>
*********************father********************
<child2 v-bind="$attrs" v-on="$listeners" /> //父组件通过v-on="$listeners"中转点击事件传给子组件
</div>
</template> <script>
import Child2 from '../components/Child2';
export default {
name: 'Father',
components: {
Child2
}
}
</script> <style> </style>

子组件

<template>
<div>
====================Child2==================
<br>
<span>{{child2Data}}</span>
<br>
<button @click="handleBtnClick">点击</button>
</div>
</template> <script>
export default {
inheritAttrs:false,
name: 'Child2',
props: {
child2Data: String
},
methods: {
handleBtnClick() {
this.$emit('handle') // 子组件即可访问爷组件的作用域
}
}
}
</script> <style> </style>

结果图:

inheritAttrs

其他用法学习博客:https://www.jianshu.com/p/4649d317adfe

参考博客:https://blog.csdn.net/m0_37115637/article/details/88779799

vue中$attrs和$listeners以及inheritAttrs的用法的更多相关文章

  1. vue inheritAttrs、$attrs和$listeners使用

    inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2 ...

  2. vue2 inheritAttrs、attrs和attrs和listeners使用

    inheritAttrs.attrs和attrs和listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.or ...

  3. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  4. Vue - 组件通信之$attrs、$listeners

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...

  5. vue中的$props、$attrs和$listeners研究 [包装iview组件]

    $props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 ...

  6. vue组件传值之$attrs、$listeners

    当有父组件A,子组件B,孙子组件C的时候 A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值 那么A-C之间的传值要怎么做呢? 1.event.bus总线传值 ...

  7. Vue组件传值(三)之 深层嵌套组件传值 - $attrs 和 $listeners

    $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 ...

  8. vue3中$attrs的变化与inheritAttrs的使用

    在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...

  9. 关于 vue2.x 的 $attrs 和 $listeners

    $attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且 ...

随机推荐

  1. lqb 基础练习 01字串 (itoa)

    基础练习 01字串 时间限制:1.0s   内存限制:256.0MB     问题描述 对于长度为5位的一个01串,每一位都可能是0或1,一共有32种可能.它们的前几个是: 00000 00001 0 ...

  2. 力扣(LeetCode)二进制求和 个人题解

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  3. linux下制作linux系统盘(光盘、U盘)

    cdrecord制作启动光盘 首先cdrecord -scanbus输出设备列表和标识,(我的此次为5,0,0)  [ˈrekərd] 然后用cdrecord -v dev=5,0,0 -eject ...

  4. 【译】利用Lombok消除重复代码

    当你在写Getter和Setter时,一定无数次的想过,为什么会有POJO这么烂的东西.你不是一个人!(不是骂人-)无数的开发人员花费了大量的时间来写这种样板代码,而他们本来可以利用这些时间做出更有价 ...

  5. 解构ffmpeg(二)

    通过比较DirectShow和ffmpeg两者的FilterGraph,分析ffmpeg的FilterGraph运作. 首先FilterGraph是一个图,图由点和边构成.在FilterGraph中的 ...

  6. Google Chrome浏览器的编码格式的修改步骤

    Chrome  Charset插件 大二萌新正在学JavaEE,当学到TomCat时,用到浏览器,但是呢,出现了中文乱码的情况,而又用的是Google,可烦恼了,由于Google Chrome的更新, ...

  7. [Windows篇] 在windows 10上源码编译gtest 并编写CMakeLists.txt

    本文首发于个人博客https://kezunlin.me/post/aca50ff8/,欢迎阅读! compile gtest on windows 10 Guide compile gtest on ...

  8. 数据表与简单java类——多对多映射

    给定一张Meber和Product表,得到如下信息: 1.获取一个用户访问的所有商品信息 2.获取一个商品被哪些用户浏览过的信息 package Mapping_transformation; cla ...

  9. JS使用readAsDataURL读取图像文件

    JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...

  10. Django杂录

    Django杂录 因为是概括性的讲解,每一个方面没有具体到点,所以这篇是杂录 HHTP协议 超文本传输协议 四大特性 基于TCP/IP之上作用于应用层 基于socket请求响应 无状态 无连接 数据格 ...