$attrs和$listeners如何使用
时间: 2023-09-02 15:07:32 浏览: 56
在Vue.js中,$attrs和$listeners是两个常用的属性,它们的作用如下:
1. $attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。可以在组件中使用 $attrs 来访问这些特性,从而实现组件的透传特性。
2. $listeners:包含了父作用域中 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件,从而实现组件的透传事件。
举个例子,假设有一个父组件 Parent.vue 和一个子组件 Child.vue,Parent.vue模板代码如下:
```html
<template>
<Child
:name="name"
v-bind="$attrs"
v-on="$listeners"
/>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Parent',
components: {
Child
},
props: {
name: String
}
}
</script>
```
在这个例子中,我们通过 v-bind="$attrs" 将父组件中的所有非 props 特性(例如 id、class、style等)透传给子组件。同时,通过 v-on="$listeners" 将父组件中除了 .native 修饰器以外的所有事件监听器透传给子组件,这样就可以在子组件中使用这些事件了。
在子组件 Child.vue 中,我们可以这样使用 $attrs 和 $listeners:
```html
<template>
<div>
<input
:value="value"
@input="$emit('input', $event.target.value)"
v-bind="$attrs"
v-on="$listeners"
/>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
value: String
}
}
</script>
```
在这个例子中,我们通过 v-bind="$attrs" 将父组件中的非 props 特性(例如 id、class、style等)绑定到子组件的 input 元素上,通过 v-on="$listeners" 将父组件中的事件监听器绑定到子组件的 input 元素上,这样就实现了组件的透传特性和透传事件。