浅谈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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
vue.js实现只能输入数字的输入框
Oct 19 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中call_user_func_array回调函数的用法示例
2016/11/26 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python类定义和类继承详解
2015/05/08 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python构建图像分类识别器的方法
2019/01/12 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
python爬虫请求头的使用
2020/12/01 Python
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
小学运动会演讲稿
2014/08/25 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
golang连接MySQl使用sqlx库
2022/04/14 Golang