简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > Vue.js > body text

A brief introduction to basic event processing in Vue

WBOY
Release： 2022-08-08 17:32:50
forward
1672 people have browsed it

This article brings you relevant knowledge about vue, which mainly introduces related issues about basic event processing. Vue event processing is a necessary aspect of every Vue project. It is used to capture user input, share data, and many other creative ways. Let’s take a look at it together, I hope it will be helpful to everyone.

A brief introduction to basic event processing in Vue

[Related recommendations: javascript video tutorial, vue.js tutorial】

Vue event processing is A necessary aspect of every Vue project. It is used to capture user input, share data, and many other creative ways.

In this article, I'll cover the basics and provide some code examples for handling events.

Basic Event Handling

Using the v-on directive (@ for short) we can listen to DOM events and run handler methods or inline Javascript: 

<div v-on:click=&#39;handleClick&#39; />
<!-- 相当于 -->
<div @click=&#39;handleClick&#39; />
Copy after login

We will cover Some of the more common events you might want to capture, click here for a complete list of DOM events.

Emitting Custom Events

A common use case in any web framework is to want a child component to be able to emit events to its parent component. This will allow two-way data binding.

An example of this is sending data from an input component to a parent form.

The syntax for emitting events is different depending on whether we are using the Options API or the Composition API.

In the Options API, we can simply call this.$emit(eventName, payload): 

export default {
  methods: {
    handleUpdate() {
      this.$emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
  }
}
Copy after login

However, the Composition API does not have this. Instead, we can access the emit method directly using the Vue3 setup method.

The second parameter of the setup method is the context variable, which contains three attributes: attrs, slot and emit.

As long as the context object is imported, emit can be called with the same parameters as the Options API. 

export default {
  setup (props, context) {
    const handleUpdate = () => {
      context.emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Copy after login

One way to clean up your code is to use object destructuring to import emit directly. It looks like this. 

export default {
  setup (props, { emit }) {
    const handleUpdate = () => {
      emit(&#39;update&#39;, &#39;Hello World&#39;)
    }
    return { handleUpdate }
  } 
}
Copy after login

Whether we use the Options API or the Composition API, our parent components listen to custom events in the same way. 

<HelloWorld @update=&#39;inputUpdated&#39;/>
Copy after login

If the method we emit is also passed a value, we can capture it in two different ways - depending on whether we work inline or use another method.

First, we can use the passed $event value in the template. 

<HelloWorld @update=&#39;inputUpdated($event)&#39;/>
Copy after login

Secondly, if we use a method to handle the event, the value passed will be automatically passed to our method as the first parameter. 

<HelloWorld @update=&#39;inputUpdated&#39;/>

        

            

                
Popular Tutorials

                More>
                
            

            

                

                    
Related Tutorials 

                    
Popular Recommendations

                    
Latest courses

                

                
                
                
            

            
        


        

            

                
Latest Downloads

                More>
                
            

                        
            

                

                    
Web Effects 

                    
Website Source Code

                    
Website Materials

                    
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！