Custom Event function diagrams of Vue components and custom diagrams of vue Components

Custom Event function diagrams of Vue components and custom diagrams of vue Components

Use v-on to bind custom events

(1) webpack-based project Initialization

Before using it, we first use npm to build a vue application so that the project can be used with the webpack module package. The command is as follows:

Enter the custom empty folder vuepro. During myapp project initialization, you must use webpack to generate a standard directory project folder.

vue init webpack myapp

During the installation process, we will see the following operations. The first few will press enter and enter n, as shown in figure

After the installation is complete, some files and folders will be automatically generated under the myapp folder, indicating that our project Initialization is complete, and our APP. vu is the main component, and components is a code reuse mechanism of Vue. components combines js and HTML as the basis of the entire Vue application layer.

We can run our project according to the command prompted by the terminal

Cd myapp

npm run dev

Then, assign the obtained URL to the browser. The following page indicates that the webpack-based project has been successfully built.

Open the main component. If you have the same reminder as me, because our javascript does not support ES6 syntax, you only need to change the language type in settings.

Here we can introduce the use of component custom events.

(2) v-on & $ emit uses $ on (eventName) to listen to events and uses $ emit (eventName) to trigger events

Create a new Emit. vue component under myapp/src/components. At the same time, we must introduce this component into the main component APP. vue and register this component.

Then we will go to the Emit. vue file to provide an example of a custom event.

Click the button to obtain the event Box Parameters in the component.

Summary

The above is a demo of the Vue component's Custom Event function. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!