组件封装 - 属性和事件传递高级方案：$attrs 和 $listeners

前端

2023-12-06 11:43:57

引言

在开发 Vue 项目时，我们经常需要使用一些三方库或自己封装的组件。为了让这些组件能够与我们的代码更好地集成，我们需要了解如何正确地传递属性和事件。

`$attrs` 和 `$listeners`

Vue 提供了两个特殊属性 $attrs 和 $listeners，可以帮助我们实现属性和事件的传递。

$attrs：包含了父组件传递给子组件的所有属性，除了 class 和 style。
$listeners：包含了父组件传递给子组件的所有事件监听器。

使用 `$attrs` 和 `$listeners`

传递属性

<parent-component :name="username" :age="20"></parent-component>

Vue.component('parent-component', {
  template: '<child-component v-bind="$attrs"></child-component>',
  components: {
    'child-component': {
      template: '<div>{{ name }} - {{ age }}</div>',
      props: ['name', 'age']
    }
  }
})

在父组件中，我们使用 v-bind="$attrs" 将父组件的所有属性传递给子组件。在子组件中，我们使用 props 接收这些属性。

传递事件

<parent-component @click="handleClick"></parent-component>

Vue.component('parent-component', {
  template: '<child-component v-on="$listeners"></child-component>',
  components: {
    'child-component': {
      template: '<div @click="handleClick">点我</div>',
      methods: {
        handleClick() {
          // 执行点击事件
        }
      }
    }
  }
})

在父组件中，我们使用 v-on="$listeners" 将父组件的所有事件监听器传递给子组件。在子组件中，我们使用 v-on 接收这些事件监听器。