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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
javascript中indexOf技术详解
May 07 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
基于jquery实现的树形菜单效果代码
Sep 06 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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会话控制:Session与Cookie详解
2014/09/27 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python探索之pLSA实现代码
2017/10/25 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
出国留学经济担保书
2014/04/01 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
初中作文评语
2014/12/25 职场文书
体育教师教学随笔
2015/08/15 职场文书