Vue-component custom events (binding and unbinding)

Component custom event (binding)

Like click and change, these are built-in events of js, which we can use directly. This time we learn to create new events according to our needs, but the built-in js is for html elements, and this custom event is for components of

Note: Native DOM events can also be bound to the component, and the native modifier needs to be used. Destroying the component instance will also destroy the custom event corresponding to the component

The following is illustrated by the case

1 Write a case

As shown in the picture, I have three components, namely students, school and app. The other two components are managed by the app. At this time, I want to give the school component a button. When it is clicked, the school name will be given to the app.

2 props implementation

Through the parent component to pass the props of the function type to the child component: the child passes the data to the parent

We can use props to pass the child component to the parent component, so first define the function in the app, and then pass it through props

3 Custom event implementation method 1

If I still want to continue to give the student a button, what about giving the student's name to the app component when I click it? No need for props this time, use custom events to implement

Binding custom events to child components through the parent component: the child passes data to the parent

Use $emit to trigger a custom event on the component, and the parameter is the event name

Of course, it is also possible to use @ abbreviation instead of v-on. I have no abbreviation here, and the event name and callback name can be the same

can also be done

4 Custom event implementation method 2

In addition to the above methods, there is another way to achieve, use ref, write a loading hook function, use $on

Although this way of writing is cumbersome and needs to write a hook function, it is also more flexible

the effect is the same

What if it is more flexible to verify? For example, there is such a requirement now that it takes 3 seconds to load the event. At this time, the first writing method cannot be used, but the second writing method can

5 The event can only be triggered once

In some scenarios, I want a custom event to be triggered once and then it will no longer be triggered. At this time , the on api cannot be used, and the on api should be used. It should be used$onthisapi,\; you\; should\; use$ once

What if it is not written this way? The same is true, just .once after the event name

6 Multiple parameter passing

Custom events can also support the passing of multiple parameters, just use commas to splice

But generally multiple parameters are not written in this way, but are received by ...params in es6, which will splice multiple parameters into an array

Component custom event (unbinding)

The above describes the binding of custom events, and the next step is the corresponding unbinding of custom events

1 Unbind an event

Use $off to unbind, the parameter is the event name, this way of writing only supports unbinding an event

So how to operate multiple?

2 Unbind multiple events

For example, now there are two custom events

Use $off to unbind, the parameter is an array, which is the parameter name

3 Unbind all events

There is also a more violent way of writing, use the off method to pass nothing, this is to unbind all events

Component custom event summary

1. A way of communication between components, suitable for: child components ===> parent components

2. Usage scenario: A is the parent component, B is the child component, and B wants to pass data to A, then it needs to bind a custom event to B in A (event callback is in A).

3. Bind custom events:

4. The first way, in the parent component: <Demo @atguigu="test"/>or<Demo v-on:atguigu="test"/>

5. The second way, in the parent component:

<Demo ref="demo"/>

......

mounted(){
    
    

this.$refs.xxx.$on('atguigu',this.test)

}

3. If you want a custom event to be triggered only once, you can use oncemodifiers, or $oncemethods.

4. Trigger a custom event:this.$emit('atguigu',数据)

5. Unbind custom eventsthis.$off('atguigu')

6. Components can also be bound to native DOM events, requiring the use of nativemodifiers.

7. Note: When this.$refs.xxx.$on('atguigu',回调)binding a custom event, the callback must either be configured in methods or use an arrow function, otherwise this will cause problems!