浅谈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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 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中socket通信机制实例详解
2015/01/03 PHP
php blowfish加密解密算法
2016/07/02 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
javascript 随机展示头像实现代码
2011/12/06 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
python实现批量监控网站
2016/09/09 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
Python Lambda函数使用总结详解
2019/12/11 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
Python实现分数序列求和
2020/02/25 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
小学三年级数学教学反思
2014/01/31 职场文书
老师的检讨书
2014/02/23 职场文书
在校实习生求职信
2014/06/18 职场文书
公司授权委托书
2014/10/17 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
大足石刻导游词
2015/02/02 职场文书
入党介绍人意见范文
2015/06/01 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python