浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用


Posted in Javascript onMarch 08, 2020

vue父子组件之间的传值我们都知道使用props和emit,但是祖孙之间的传值在以前,我们都需要子辈作为中间人,当祖辈有值要传递给孙辈时,需要子辈作为中间人把值传递给孙辈,当孙辈想要改变祖辈的值时,需要先emit子辈的方法,然后子辈再emit父辈的方法从而改变祖辈的值,如果是多级组件嵌套的话,那么祖孙辈之间传值,就会变得非常的繁琐,为了解决这个需求,vue2.4版本产生了$attrs,$listeners,inheritAttrs这三个属性。

vm.$attrs

官方API

vm.$attrs

2.4.0 新增,类型:{ [key: string]: string },只读

详细:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

使用介绍

从官方介绍我们可以得出 $attrs 应用于父子传值场景下,子组件通过 $attrs 可以访问父组件传过来的所有属性,但需要注意的是如果父组件所传的属性中有在子组件 props 中有过声明,那么该属性不会出现在 $attrs 对象中。

上示例

<template>
 <div>
  <p>我是父组件</p>
  <test name="tom" :age="12" :id="12345" class="child" style="color: red" />
 </div>
</template>

<script>
export default {
 components: {
  test: {
   template: `
   <div>
    <p>我是子组件</p>
    <test2 v-bind="$attrs" s1="sss" s2="sss" />
   </div>`,
   props: ["name"],
   created() {
    console.log(this.$attrs); // {age: 12, id: 12345}
   },
   components: {
    test2: {
     template: `<p>我是孙子组件</p>`,
     props: ["age", "s1"],
     created() {
      console.log(this.$attrs); // {s2: "sss", id: 12345}
     }
    }
   }
  }
 }
};
</script>

首先可以看到父组件传给子组件传了 name、age、id、class、style 五个属性,其中 name 属性在子组件 props 中声明,又因为 class 和 style 属性会被 $attrs 除外,最终在子组件打印的 $attrs 输出了 {age: 12, id: 12345}

接着,子组件把自己的 $attrs 对象传给了孙子组件,同时又给孙子组件传了 s1、s2 两个属性,孙子组件在自己的属性 props 中声明了 age 、s1 两个属性,最终打印输出 {s2: "sss", id: 12345} 可以看到,孙子组件的 $attrs 合并了从父组件和子组件传来的属性,并把 props 中声明的属性除外

至此 $attrs 的介绍结束,下面开始介绍 inheritAttrs

inheritAttrs

官方API

inheritAttrs

2.4.0 新增,类型:boolean,默认值:true

详细:

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效,且可以通过 v-bind 显性的绑定到非根元素上。

注意:这个选项不影响 class 和 style 绑定。

使用介绍

官方的解释看上去很唬人,其实默认情况就是把 $attrs 对象上没在子组件 props 中声明的属性加在子组件的根 html 标签上

上示例

<template>
 <div>
  <p>我是父组件</p>
  <test name="tom" age="12" class="child" style="color: red" />
 </div>
</template>

<script>
export default {
 components: {
  test: {
   template: `<p>我是子组件</p>`,
   props: ["name"],
   inheritAttrs: true, // 默认为 true
   created() {
    console.log(this.$attrs); // {age: "12"}
   }
  }
 }
};
</script>

可以看到父组件传给子组件传了 name、age 两个属性,其中 name 属性在子组件 props 中声明,以上代码浏览器解析后

<div>
 <p data-v-469af010>我是父组件</p>
 <p data-v-469af010 age="12" class="child" style="color: red;">我是子组件</p>
</div>

可以看到没有在子组件 props 中声明的 age 属性被写到了标签里,如果你不希望这样,则可以把子组件中的 inheritAttrs 设为 false,解析后的结果如下

<div>
 <p data-v-469af010>我是父组件</p>
 <p data-v-469af010 class="child" style="color: red;">我是子组件</p>
</div>

可以看到标签中的属性消失了,同时可以看到 class、style 属性不受影响

至此 inheritAttrs 的介绍结束

到此这篇关于浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用的文章就介绍到这了,更多相关Vue2.4.0 $attrs与inheritAttrs内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
vuex存值与取值的实例
Nov 06 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
vue-cli点击实现全屏功能
Mar 07 #Javascript
vue全屏事件开发详解
Jun 17 #Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 #Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 #Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 #Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
You might like
php记录日志的实现代码
2011/08/08 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python获取文件扩展名的方法
2015/07/06 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
品质主管岗位职责
2014/03/16 职场文书
微电影大赛策划方案
2014/06/05 职场文书
信息员培训方案
2014/06/12 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
解除劳动合同证明书
2014/09/26 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
教师研修随笔感言
2015/11/18 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
Python打包为exe详细教程
2021/05/18 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS