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

Editor to share with you what the custom events in the Vue components are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

This paper mainly introduces the concept and use of custom events of components.

What is a component custom event:

Component custom events are a way of communicating between components in the direction of child components = > parent components.

Usage scenario: an is the child component and B is the parent component. If you want to transfer the data of B to A, you can use the props configuration item. If you want to transfer the data of A to B, you need to use the component custom event or use props plus callback function.

First, use props plus callback function to transfer data from child component to parent component.

Main.js:

/ / introduce vue dependency import Vue from 'vue'// import component Appimport App from'. / App.vue'// close the production prompt Vue.config.productionTip = false// to create a vue instance new Vue ({/ / this has not been learned yet, first know that its role is to put app into the container. Render: h = > h (App), / / configure the vue instance to manage the container where id is app}). $mount ('# app')

App.vue:

App acquires the school name of the school subcomponent: {{schoolNameFromSchool}} / / the original introduction / / import school from ". / School.vue" / / import student from ". / Student.vue" / / modified / / introduces the school component and the student component Syntax involving es modularization import school from ". / components/School.vue" import student from ". / components/Student.vue" export default {data () {return {schoolNameFromSchool: ""}}, components: {/ / registered component school, student} Methods: {/ / define a callback function and pass it to the subcomponent School getSchoolNameFromSchoolVc (schoolName) {console.log ("App gets the school name of the School subcomponent:", schoolName) / / assign a value to schoolNameFromSchool this.schoolNameFromSchool = schoolName;}}

Schoo.vue:

School: {{schoolName}} address: {{schoolAddress}} where the school name is passed to the App component / / where the interactive code is written, it needs to be exposed to other places to introduce / / this requires a little knowledge of es6 modularization. Default exposure is generally used here, because this is a single-file component and only one component object needs to be exposed. / / and it is easy to introduce default exposed components and introduce syntax. Export default {data () {return {schoolName: "still Silicon Valley", schoolAddress: "Beijing"}}, / / receive callback function props: ["getSchoolNameFromSchoolVc"], methods: {sendSchoolNameToApp () {/ / call callback function And pass the name of the school into this.getSchoolNameFromSchoolVc (this.schoolName)}} / * where the style is written * / .orange {background-color: orange }

Student.vue:

Student name: {{studentName}} Age: {{studentAge}} / / where the interactive code is written, it needs to be exposed to other places to introduce / / this requires a little knowledge of es6 modularization. Default exposure is generally used here, because this is a single-file component, only one component object needs to be exposed, / / and it is easy to introduce default exposed components to introduce syntax. Export default {data () {return {studentName: "Zhang San", studentAge:18}},} / * where the style is written * / .orange {background-color: gray;}

The process in this way:

1. Define a callback method in the parent component (App) and pass it to the child component (School).

The callback method renders the school name passed by the School component in the area corresponding to the App component.

two。 The subcomponent uses the props configuration item to receive the callback function and write a button that is clicked to invoke the callback function to pass the data to the App component.

Effect:

The second way is to use the component custom event implementation:

Use the component custom event to pass the student name of the child component Student to the App component and render it.

Step by step:

3. In the parent component App, set the custom event and configure an event callback

4. In the subcomponent, a custom event is triggered to pass the value.

Effect:

In addition to binding custom events in the component tag, you can also bind them in conjunction with the ref attribute in the lifecycle callback function $mounted.

The execution effect is the same.

Custom events can still use the event modifier once.

Using props or component custom events for child components to pass data like a parent component is more similar.

The way for props is to pass the callback function directly to the subcomponent call.

The component custom event exposes the callback function through the event, and then the sub-component triggers the event to achieve the effect of calling the callback function.

Unbind component custom events:

Or when the component is destroyed, these custom events are destroyed.

These are all the contents of the article "what are custom events in Vue components?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.