Vue $attrs和$listeners的使用

最新推荐文章于 2025-03-03 14:29:13 发布

weixin_49085046

最新推荐文章于 2025-03-03 14:29:13 发布

阅读量579

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49085046/article/details/120144207

版权

Vue的$attrs和$listeners用于组件间的数据传递，特别是在多级组件嵌套时。$attrs包含父组件的所有非prop属性（除class和style），而$listeners则包含非原生事件的监听器。当组件不需要中间处理时，使用它们可以避免过度依赖vuex。通过v-bind绑定，子组件能够接收并调用父组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

A父、B子、C孙

组件传值的时候会用到A组件在B组件传递值，B组件会通过 $attrs获取到不在B组件props里面的所有属性，B组件通过在C组件上绑定 $attrs 和 $listeners 使C组件获取A组件传递的值并且可以调用在A组件那里定义的方法

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法-- $ attrs/ $listeners

$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
例子：

// A组件
<template>
  <div class="home">
      <el-link type="primary" @click="change">测试vuex修改参数，其他页面响应式改变</el-link>
    <!-- $attrs和$listeners -->
    <Son :name="name" @change="change">&l

最低0.47元/天解锁文章