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表单验证你真的会了吗？vue表单验证（form）validate
这篇文章主要介绍了vue表单验证你真的会了吗？vue表单验证（form）validate,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了element-vue实现网页锁屏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
这篇文章主要给大家介绍了关于vue3路由跳转params传参接收不到的解决办法,Vue3是目前前端开发中非常流行的框架之一,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
这篇文章主要介绍了详解vue2.0+axios+mock+axios-mock+adapter实现登陆，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了详解Nuxt.js部署及踩过的坑，Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署。本文主要说说服务端渲染应用部署，感兴趣的小伙伴们可以参考一下2018-08-08
如何使用vue-json-viewer插件展示JSON格式数据
这篇文章主要给大家介绍了关于如何使用vue-json-viewer插件展示JSON格式数据的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下2023-11-11
Vue3中Watch、Watcheffect、Computed的使用和区别解析
Watch、Watcheffect、Computed各有优劣,选择使用哪种方法取决于应用场景和需求,watch 适合副作用操作,watchEffect适合简单的自动副作用管理,computed 适合声明式的派生状态计算,本文通过场景分析Vue3中Watch、Watcheffect、Computed的使用和区别,感兴趣的朋友一起看看吧2024-07-07
Vue报错:TypeError:Cannot create property '
这篇文章主要介绍了Vue报错:TypeError:Cannot create property 'xxx' on string 'xxxx'问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了mpvue 单文件页面配置详解，本文将介绍如何在 mpvue 官方模板的基础上，通过配置 mpvue-config-loader 来实现在 vue 文件内书写小程序的页面配置，感兴趣的小伙伴们可以参考一下2018-12-12
本文主要介绍了Vue操作数组的几种常用方法小结,主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from这几种方法,感兴趣的可以了解一下2023-09-09
最新评论