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 相关文章推荐
Javascript base64编码实现代码
Dec 02 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
PassWord输入框代码分享
Jun 07 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
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
一些PHP写的小东西
2006/12/06 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
php输出xml属性的方法
2015/03/19 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php新建文件的方法实例
2019/09/26 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
python中dir函数用法分析
2015/04/17 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
PyQt5实现拖放功能
2018/04/25 Python
详解python3中zipfile模块用法
2018/06/18 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python中加背景音乐如何操作
2020/07/19 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
给领导的感谢信范文
2015/01/23 职场文书
经理岗位职责范本
2015/04/15 职场文书
办公经费申请报告
2015/05/15 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
python 标准库原理与用法详解之os.path篇
2021/10/24 Python