189 8069 5689

vue中的$attrs和$listeners属性及用法是什么

vue中的$attrs和$listeners属性及用法是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联公司于2013年开始,先为和顺等服务建站,和顺等地企业,进行企业商务咨询服务。为和顺企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。但仅仅是传递数据,不做中间处理,使用 vuex 处理,未免有些大材小用了。所以就有了 $attrs$listeners两个属性 ,通常配合 inheritAttrs 一起使用。

$attrs

  • 从父组件传给自定义子组件的属性,如果没有 prop 接收会自动设置到子组件内部的最外层标签上,如果是 classstyle 的话,会合并最外层标签的 classstyle

  • 如果子组件中不想继承父组件传入的非 prop 属性,可以使用 inheritAttrs 禁用继承,然后通过 v-bind="$attrs" 把外部传入的 非 prop 属性设置给希望的标签上,但是这不会改变 classstyle

inheritAttrs 属性

2.4.0 新增

官网链接 https://cn.vuejs.org/v2/api/#inheritAttrs

  • 类型boolean

  • 默认值true

  • 详细

    默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrsfalse,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效,且可以通过 v-bind 显性的绑定到非根元素上。

    注意:这个选项不影响classstyle 绑定。

例子:

父组件



子组件



子组件中没有接受父组件中传过来的值,也没有绑定,但是有v-bind="$attrs"这个属性,他会自动接受并绑定

inheritAttrs: false

vue中的$attrs和$listeners属性及用法是什么

inheritAttrs: true

vue中的$attrs和$listeners属性及用法是什么

$listeners (官网解释)

  • listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

先上代码:这里只举例focueinput两个原生事件

// 父组件

// 子组件


这样绑定原生事件很麻烦,每一个原生事件都需要绑定,但用v-on="$listeners"就会省事很多

 

这样一行代码就能解决绑定所有的原生事件的问题

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


本文名称:vue中的$attrs和$listeners属性及用法是什么
本文路径:http://jkwzsj.com/article/ggdede.html

其他资讯