Tutorial on using $attrs and $listeners in Vue

introduce

$attrs

Inherits all parent component properties (properties not received through props include class name and style).

inheritAttrs:

Whether non-props attributes are displayed in the outermost layer of the tag. The default value is true, which means that all parent component attributes (except props specific bindings) are inherited as normal HTML features and applied to the root element of the child component. If you do not want the root element of the component to inherit features, set inheritAttrs: false, but the class will still be inherited.

$listeners

It is an object that can receive all method bindings, which contains all listeners acting on this component. With v-on="$listeners", all event listeners are directed to a specific child element of this component.

Example

In the parent component

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components:
    Son,
  },
};
</script>
 
<style></style>

In subcomponent

<template>
  <div id="app">
    <Son src="https://img01.yzcdn.cn/vant/logo.png"></Son>
  </div>
</template>
 
<script>
import Son from "./components/son.vue";
export default {
  name: "App",
  components:
    Son,
  },
};
</script>
 
<style></style>

It can be seen that when inheritAttrs defaults to false, the attributes are passed to the outermost subcomponent

When inheritAttrs is true

When using props to receive attributes, the attributes will not be displayed

Summary: If the attributes passed in the component tag are not received by the subcomponent, they will run to the outermost layer of the subcomponent tag.

Non-props attributes can be received through $attrs {attribute name: attribute value}

<template>
  <div>
    <img v-bind="$attrs" alt="" />
  </div>
</template>
 
<script>
export default {
  inheritAttrs: false,
};
</script>
<style scoped>
.img {
  width: 100px;
  height: 100px;
}
</style>

When binding a click event to a child component, the click event will not be triggered. You can use the .native modifier to bind successfully.

Or use $listeners to bind all methods.

In subcomponent

result

Summarize

All non-props attributes can be received through $attrs

Use: v-bind="$attrs" to bind all non-props attributes to the corresponding tags. It can also be used for components

All method binding subcomponents on the component can be received through $listeners

Use: v-on="$listeners" to bind all methods to the corresponding tags of the component, which can also be used for components

This is the end of this tutorial on how to use $attrs and $listeners in Vue. For more information about Vue $attrs $listeners, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!