vue $attrs、$listeners、inheritAttrs的理解

本文详细解析了 Vue 中的 `$attrs`、`$listeners` 以及 `inheritAttrs` 属性的用法。`$attrs` 包含父作用域中未声明为 props 的绑定,`$listeners` 包含父作用域的事件监听器,它们在创建高阶组件时非常有用。`inheritAttrs` 默认情况下允许父组件的非 props 特性绑定到子组件根元素,但可以通过设置为 false 来阻止这一行为。通过实例属性 `$attrs`,可以显式地将这些特性绑定到非根元素。文章通过组件 A、B、C 的实例展示了如何使用这些特性进行值传递和事件处理。
摘要由CSDN通过智能技术生成

$attrs

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

$listeners

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

inheritAttrs

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

下面举个例子说明,有这样三个组件,组件A、B、C,他们的关系是这样的
在这里插入图片描述
组件A如果向组件B传值的话,可以不用在组件B的props定义,可以通过$attrs直接获取

组件A

<template>
  <div class="a">
    <test1 :a="1"  />
  </div>
</template>

组件B

<template>
  <div class="b"
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值