成都网站建设设计

将想法与焦点和您一起共享

怎么在Vue2.4.0项目中使用$attrs与inheritAttrs-创新互联

怎么在Vue2.4.0项目中使用$attrs与inheritAttrs?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联建站十载专注成都高端网站建设按需策划服务,为客户提供专业的成都网站制作,成都网页设计,成都网站设计服务;创新互联建站服务内容包含成都网站建设,小程序开发,软件开发,网络营销推广,网络运营服务及企业形象设计;创新互联建站拥有众多专业的高端网站制作开发团队,资深的高端网页设计团队及经验丰富的架构师高端网站策划团队;我们始终坚持从客户的角度出发,为客户量身订造网络营销方案,解决网络营销疑问。

vm.$attrs

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

使用介绍

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

上示例



首先可以看到父组件传给子组件传了 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 标签上

上示例



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

 我是父组件

 我是子组件

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

 我是父组件

 我是子组件

看完上述内容,你们掌握怎么在Vue2.4.0项目中使用$attrs与inheritAttrs的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


名称栏目:怎么在Vue2.4.0项目中使用$attrs与inheritAttrs-创新互联
浏览路径:http://chengdu.cdxwcx.cn/article/dghoid.html