Vue $attrs和Vue $listeners属性的作用

最新推荐文章于 2025-09-18 22:00:00 发布

原创最新推荐文章于 2025-09-18 22:00:00 发布 · 363 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue中组件的$attrs和$listeners特性。$attrs用于子组件接收父组件未声明为prop的属性，而$listeners则包含父组件的事件监听器。通过这两个特性，子组件可以方便地继承和处理父组件传递的属性和事件。文中通过实例展示了如何在父子组件间使用$attrs和$listeners进行数据和事件的传递。

$attrs

官方解释：

类型: {[key:String]: string}
只读
详细:
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

意思：子组件可以通过这个属性获得父组件在子组件上添加的属性（除了子组件prop声明的以外的属性），此外子组件可以通过v-bind="$attr"的方式，将属性自动绑定到子组件的某标签上
例如：
父组件：

<template>
  <div id="app">
    <HelloWorld @clickMe="clickMe" :my-name="myName" content="Click me!"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data () {
    return {
      myName: 'cheng_chen'
    }
  },
  methods: {
    clickMe() {
    }
  }
}
</script>

子组件

<template>
  <div class="hello">
    <button @click="clickMe">{{ content }}</button>
    <div v-bind="$attrs"></div>
    <div>{{ $attrs }}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    content: String
  },
  methods: {
    clickMe() {
      this.$emit('clickMe',1)
    }
  },
  created() {
    console.log(this.$attrs);
  }
}
</script>

效果图：

$listeners

官方解释：

类型：{ [key: string]: Function | Array }
只读
详细：
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

意思：类似于$attrs，但是不同于$attrs的是：$listeners针对于事件监听器，如果父组件没有通过在事件监听器上添加.native修饰器，父组件作用于子组件的监听事件，子组件可以通过$listeners来获取
实例：
父组件：

<template>
  <div id="app">
    <HelloWorld @clickMe="clickMe" :my-name="myName" content="Click me!"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data () {
    return {
      myName: 'cheng_chen'
    }
  },
  methods: {
    clickMe() {
    }
  }
}
</script>

子组件

<template>
  <div class="hello">
    <button @click="clickMe">{{ content }}</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    content: String
  },
  methods: {
    clickMe() {
      this.$emit('clickMe',1)
    }
  },
  created() {
    console.log(this.$listeners);
  }
}
</script>

结果：
效果图