c语言编程笔录

首页 >   > 笔记大全

笔记大全

认识一下vue中的attrs和listeners属性 聊聊关于用法

更新时间：2023-06-22

前言

在Vue框架中，$attrs和$listeners是两个特殊的属性，用于在父组件向子组件传递props和监听子组件的事件。这两个属性在应对一些特殊需求时非常有用。在本文中，我们将详细介绍$attrs和$listeners属性的使用方法，以及它们在Vue开发中的作用。

$attrs属性的用法

$attrs属性是子组件中的一个特殊属性，用于接收来自父组件的所有非props的绑定属性。例如，在父组件中使用<ChildComponent v-bind:attr1="value1" attr2="value2">传递的属性，可以在子组件中通过$attrs获取到。$attrs是一个对象，包含传递给子组件的所有非props属性。

使用$attrs属性有以下注意事项：

  1. $attrs只包含父组件传递的非props属性，也就是没有在子组件中声明的属性。
  2. $attrs是一个响应式对象，当父组件的非props属性发生变化时，子组件也会相应地更新。

下面是一个示例代码，展示了如何在子组件中使用$attrs属性：

// ChildComponent.vue
<template>
  <div>
    <p>非props属性: {{ $attrs.attr1 }}

    <p>非props属性: {{ $attrs.attr2 }}

  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

$listeners属性的用法

$listeners属性也是子组件中的一个特殊属性，用于接收来自父组件的所有监听器。它是一个对象，包含了传递给子组件的所有事件监听函数。

使用$listeners属性有以下注意事项：

  1. $listeners只包含父组件传递的事件监听函数，也就是在父组件中使用v-on绑定的事件。
  2. 父组件中使用了v-on的事件监听函数会自动绑定到子组件上，你不需要显式地再在子组件中声明。
  3. $listeners是一个对象，你可以像调用普通的Vue监听器一样在子组件中使用。

下面是一个示例代码，展示了如何在子组件中使用$listeners属性：

// ChildComponent.vue
<template>
  <button v-on="$listeners">触发事件</button>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

总结

在Vue中，$attrs和$listeners属性分别用于接收父组件传递的非props属性和事件监听函数。$attrs是一个响应式的对象，用于获取所有非props属性。$listeners是一个对象，用于获取所有传递的事件监听函数。这两个属性允许我们在子组件中处理父组件的动态属性和事件，增强了组件之间的通信和灵活性。

希望本文能够帮助您理解和使用Vue中的$attrs和$listeners属性，提升您在Vue开发中的技能和效率。

图文推荐