vue中$attrs和$listeners以及inheritAttrs的用法
官方文档说明:
一、解释:包含了父作用域中不作为 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的用法的更多相关文章
- vue inheritAttrs、$attrs和$listeners使用
inheritAttrs.$attrs和$listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.org/v2 ...
- vue2 inheritAttrs、attrs和attrs和listeners使用
inheritAttrs.attrs和attrs和listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.or ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- Vue - 组件通信之$attrs、$listeners
前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...
- vue中的$props、$attrs和$listeners研究 [包装iview组件]
$props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 ...
- vue组件传值之$attrs、$listeners
当有父组件A,子组件B,孙子组件C的时候 A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值 那么A-C之间的传值要怎么做呢? 1.event.bus总线传值 ...
- Vue组件传值(三)之 深层嵌套组件传值 - $attrs 和 $listeners
$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 ...
- vue3中$attrs的变化与inheritAttrs的使用
在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...
- 关于 vue2.x 的 $attrs 和 $listeners
$attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且 ...
随机推荐
- lqb 基础练习 01字串 (itoa)
基础练习 01字串 时间限制:1.0s 内存限制:256.0MB 问题描述 对于长度为5位的一个01串,每一位都可能是0或1,一共有32种可能.它们的前几个是: 00000 00001 0 ...
- 力扣(LeetCode)二进制求和 个人题解
给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...
- linux下制作linux系统盘(光盘、U盘)
cdrecord制作启动光盘 首先cdrecord -scanbus输出设备列表和标识,(我的此次为5,0,0) [ˈrekərd] 然后用cdrecord -v dev=5,0,0 -eject ...
- 【译】利用Lombok消除重复代码
当你在写Getter和Setter时,一定无数次的想过,为什么会有POJO这么烂的东西.你不是一个人!(不是骂人-)无数的开发人员花费了大量的时间来写这种样板代码,而他们本来可以利用这些时间做出更有价 ...
- 解构ffmpeg(二)
通过比较DirectShow和ffmpeg两者的FilterGraph,分析ffmpeg的FilterGraph运作. 首先FilterGraph是一个图,图由点和边构成.在FilterGraph中的 ...
- Google Chrome浏览器的编码格式的修改步骤
Chrome Charset插件 大二萌新正在学JavaEE,当学到TomCat时,用到浏览器,但是呢,出现了中文乱码的情况,而又用的是Google,可烦恼了,由于Google Chrome的更新, ...
- [Windows篇] 在windows 10上源码编译gtest 并编写CMakeLists.txt
本文首发于个人博客https://kezunlin.me/post/aca50ff8/,欢迎阅读! compile gtest on windows 10 Guide compile gtest on ...
- 数据表与简单java类——多对多映射
给定一张Meber和Product表,得到如下信息: 1.获取一个用户访问的所有商品信息 2.获取一个商品被哪些用户浏览过的信息 package Mapping_transformation; cla ...
- JS使用readAsDataURL读取图像文件
JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...
- Django杂录
Django杂录 因为是概括性的讲解,每一个方面没有具体到点,所以这篇是杂录 HHTP协议 超文本传输协议 四大特性 基于TCP/IP之上作用于应用层 基于socket请求响应 无状态 无连接 数据格 ...