浅谈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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
JS实现留言板功能
Jun 17 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
javascript实现摄像头拍照预览
Sep 30 Javascript
Vue实现多标签选择器
Nov 28 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
vue.js封装switch开关组件的操作
Oct 26 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文件下载处理方法分析
2015/04/22 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
PHP实现简易计算器功能
2020/08/28 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
js Form.elements[i]的使用实例
2011/11/13 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
保护环境建议书300字
2014/05/13 职场文书
初中新生军训方案
2014/05/13 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
解除处分决定书
2015/06/25 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
vue实现简单数据双向绑定
2021/04/28 Vue.js
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
golang中字符串MD5生成方式总结
2021/07/04 Golang