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


Posted in Javascript onSeptember 01, 2019

组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用。

一般有三种方式:

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就可以让

最里面的组件拿到最外面组件传进来的数据。

那么,具体怎么使用呢?

看看下面的代码吧,很简单就懂了

准备三个组件

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

里面的代码如下

//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实现组件之间的数据传递功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
js实现密码强度检验
Jan 15 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
vue中的v-if和v-show的区别详解
Sep 01 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
python 正确保留多位小数的实例
2018/07/16 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
三方协议书范本
2014/04/22 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
经典演讲稿汇总
2014/05/19 职场文书
平面设计专业求职信
2014/08/09 职场文书
绵山导游词
2015/02/05 职场文书
家长意见书
2015/06/04 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers