vue中通过使用$attrs实现组件之间的数据传递功能
组件之间传递数据的方式有很多种，之所以有这么多种方式，是为了满足在不同场景不同条件下的使用。
一般有三种方式：
props
vuex
Vue Event Bus
本文介绍的是使用$attrs的方式。
这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs
这个api是在2.4版本中添加的，那么为什么要添加这个特性呢？
看看官网是怎么解释的
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外)，
并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
第一次看的话真是不容易看懂，这里是既包含用法又隐晦的说明了为什么使用，还是我来解释一下吧。
意思就是： $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。
引申说明一下，如果组件的嵌套层级有点深但又不那么深，比如三层。
我们如果使用props的话，最里面的组件想要获取最外层组件的数据，就要通过中间的组件的props来传递，
但是这个props对于中间的这个组件没啥用处，它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到
这种场景，写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们，不必在中间组件中写props就可以让
最里面的组件拿到最外面组件传进来的数据。
那么，具体怎么使用呢？
看看下面的代码吧，很简单就懂了
准备三个组件
里面的代码如下
//grandfather
<template>
<div style="background: blue">
father in grandfather
<father :father-age="50" :child-time="`${time}`"></father>
</div>
</template>
<script>
import father from './father'
export default {
components: {
father
},
data () {
return {
time: new Date().getTime()
}
}
}
</script>
//father
<template>
<div style="background: red">
child in father
<div>
<span>father age:</span>{{fatherAge}}
</div>
<child v-bind="$attrs"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
props: {
fatherAge: {
type: Number,
default: 0
}
}
}
</script>
//child<template>
<div style="background: green">
<div>child</div>
<div>time: {{childTime}}</div>
</div>
</template>
<script>
export default {
props: {
childTime: {
type: String,
default: ''
}
}
}
</script>
需要从爷爷组件直接传给子组件的数据，不要在父组件中的props中声明。
在子组件上通过v-bind的方式就可以把父组件中未声明而子组件需要从爷爷组件中获取的数据传给子组件。
当然，子组件props肯定是要声明的，还是props的用法啦。
总结
以上所述是小编给大家介绍的vue中通过使用$attrs实现组件之间的数据传递功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vuex中State的使用方法,Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态,这也意味着,每个应用将仅仅包含一个 store 实例,需要的朋友可以参考下2023-11-11
我们就来实现这样一个Vue自定义指令v-time，将表达式传入的时间戳实时转换为相对时间。下面小编给大家带来了使用Vue开发一个实时性时间转换指令，需要的朋友参考下吧2018-01-01
vue vantUI实现文件（图片、文档、视频、音频）上传（多文件）
这篇文章主要介绍了vue vantUI实现文件（图片、文档、视频、音频）上传（多文件），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了Vue异步组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
vue中axios的封装问题(简易版拦截,get,post)
这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下2018-06-06
我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢，本文就来详细的介绍一下，感兴趣的可以了解一下2023-08-08
贪吃蛇游戏想必是很多70、80后的回忆，一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏，感兴趣的可以了解一下2022-04-04
这篇文章主要为大家详细介绍了vue实现点击按钮倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Vue中的 watch监听属性详情，mputed计算属性用来监听多个数据；watch 监听单个数据；本文将具体介绍的是 watch监听属性，感兴趣的小伙伴可以参考一下文章的具体内容，希望对你有所帮助2021-12-12
最新评论