浅谈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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
网络传输协议(http协议)
Nov 18 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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 session机制
2011/07/17 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
python书籍信息爬虫实例
2018/03/19 Python
python3安装crypto出错及解决方法
2019/07/30 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
零基础小白多久能学会python
2020/06/22 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
植物选择:Botanic Choice
2017/02/15 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
集体婚礼证婚词
2014/01/13 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
取保候审保证书
2014/04/30 职场文书
五好关工委申报材料
2014/05/31 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
降价通知函
2015/04/23 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python