Shulou(Shulou.com)06/01 Report--

This article mainly introduces how vue uses $attrs and $listeners for multi-level data and event transmission, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.

Using $attrs and $listeners for multi-level data and event delivery

Let's first talk about how to pass Prop, which can be divided into static and dynamic Prop:

Now that you know how to pass Props, let's take a look at how the official document defines $attrs, which is described in this way in Youda's document:

Attrs: contains attribute bindings class and style that are not recognized (and obtained) as prop in the parent scope. When a component does not declare any prop, it contains bindings for all parent scopes (except class and style), and internal components can be passed in via vClure binding = "$attrs"

$attrs contains other props passed into the parent scope that is not declared in the props, so we can use $attrs to replace the props that is not needed in the parent component and needed by the child component, passing it to future generations through the props binding = "$attrs". In this way, statements are avoided and then passed on one by one.

The above line of code passes the other attributes in this scope that are not prop to the blog-post component in the way that vtalk binds = "$attrs".

After the parent component is passed to the descendant component through $attrs, what if the descendant component wants to update the state of the parent component by triggering an event? If you go up the emit event level by level, will it make the code too cumbersome and complicated? You can solve this problem with $listeners in Vue. First, take a look at the official documentation on $listeners:

Contains v-on event listeners in the parent scope (without the. Native modifier). It can pass in internal components via vMuon = "$listeners"-- useful when creating higher-level components.

The document says that $listeners contains event listeners in the parent scope. This means that $listeners represents the collection of event listeners in the parent component, as long as it is the event that triggers the parent component, not its own, it can be represented by a vMuon = "$listeners".

{{title}} export default {props: {title: String} handleClick () {this.$emit ('on-change',' New Title');}}

In the above code example, the rest of the Prop is passed to the Child component in the middle-tier component via vMuBind = "$attrs", and then the event listener in the parent scope is bound by vMuon = "$listeners". Once the emit is passed to the parent component.

Thank you for reading this article carefully. I hope the article "how vue uses $attrs and $listeners for multi-level data and event transmission" shared by the editor will be helpful to you. At the same time, I hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.