Custom events of components ①

Case introduction

We are in front of TodoList Mentioned in classic cases , If the parent component wants to pass data to the child component , We can use props. For example, the fruit component needs to pass data to the parent component , We can define the method in the parent component first , Use props Pass to subcomponent , Then let the sub component call it .

Now we have a method to transfer data from the child component to the parent component , That's it Custom events .

Now let's finish a small case , Use two different ways , Pass the data in the child component to the parent component

First we use props To complete the transmission of the school name , The code implementation is as follows ：

App Components ：

<template>
    <div>
        <h2 ref="title" > Welcome to {
   {n}}</h2>
        <hr>
        <SchoolName :getSchoolName="getSchoolName"></SchoolName>
        <StudentName ></StudentName>

    </div>
</template>

<script> import SchoolName from "@/components/School"; import StudentName from "@/components/Student"; export default {
       components:{
       SchoolName, StudentName }, data(){
       return {
       n:'CSDN' } }, methods:{
       getSchoolName(name){
       console.log('App The component has received the name of the school ：',name) } } } </script>

<style> </style>

School Components ：

<template>
        <div class="demo">
            <h2> School name :{
   {name}}</h2>
            <h2> School address :{
   {address}}</h2>
            <button @click="getSchoolName(name)"> Click to give the school name to the parent component App</button>
            <hr>            
        </div>
</template>

<script> export default {
       name:'DongBei', data(){
       return {
       name:'NEFU', address:' Harbin ', } }, props:['getSchoolName'], } </script>

<style > .demo {
       background-color: yellow; } </style>

Then we use the custom event of the component to complete the transfer of student name data ：
① First we use v-on Instructions for student Binding events on components ( Exactly student Component instance objects vc Events are bound to the ). We choose the name of the event casually , Here I use stuName.

② Then let's improve the callback function ：

<template>
    <div>
        <h2 ref="title" > Welcome to {
   {n}}</h2>
        <hr>
        <SchoolName :getSchoolName="getSchoolName"></SchoolName>
        <StudentName v-on:stuName="getStudentName"></StudentName>

    </div>
</template>

<script> import SchoolName from "@/components/School"; import StudentName from "@/components/Student"; export default {
       components:{
       SchoolName, StudentName }, data(){
       return {
       n:'CSDN' } }, methods:{
       getSchoolName(name){
       console.log('App The component has received the name of the school ：',name) }, getStudentName(name){
       console.log('App The component has received the student's name ：',name) } } } </script>

③ It's natural for us to think of , How do we trigger our custom events ？ Because our custom event is bound to Student On the instance object of the component , So here we are Student The instance object of .

Here we will use the event trigger statement $emit(eventName) To trigger an event , The parentheses can also be followed by a parameter to pass parameters to the event callback function ：

Student Components

<template>
    <div class="demo">
        <h2 class="stu" > Student name :{
   {name}}</h2>
        <h2 > Student age :{
   {age}}</h2>
        <button @click="studentNameGetter(name)"> Click to give the student name to the parent component App</button>
    </div>
</template>

<script> export default {
       name:'MyStudent', data(){
       return {
       name:' Zhang San ', age:18 } }, methods:{
       studentNameGetter(name){
       //  Trigger Student Component instance stuName event  this.$emit('stuName',name) } } } </script>

Here's a fallible point ： The name of the triggering event should not be written as the name of the event callback function ！

Be careful ：

• When binding, we can also use the abbreviated form
  
• When binding, we can use $on(eventName). This method can pass in two parameters ： The first is the name of the bound event , The second is the event callback function .

for example ：

I i You can try it first ref get Student Component instance objects , Then bind events on this instance object .

<template>
    <div>
        <h2 ref="title" > Welcome to {
   {n}}</h2>
        <hr>
        <SchoolName :getSchoolName="getSchoolName"></SchoolName>
        <StudentName ref="Student"></StudentName>
<!-- <StudentName v-on:stuName="getStudentName"></StudentName>-->
<!-- <StudentName @stuName="getStudentName"></StudentName>-->

    </div>
</template>

<script> import SchoolName from "@/components/School"; import StudentName from "@/components/Student"; export default {
       components:{
       SchoolName, StudentName }, data(){
       return {
       n:'CSDN' } }, methods:{
       getSchoolName(name){
       console.log('App The component has received the name of the school ：',name) }, getStudentName(name){
       console.log('App The component has received the student's name ：',name) } }, mounted() {
       this.$refs.Student.$on('stuName',this.getStudentName) } } </script>

The significance of this binding method is that it is very flexible , We can take an example to experience .

The first two methods of event binding are instant binding . But if there is a requirement to wait a few seconds before binding ( For example, etc Ajax After the request is sent, we will bind the custom event ), We can't use the first two methods , At this time, only the above methods can be used .

For example, now let's make it wait 3 Seconds to bind the event ：

<template>
    <div>
        <h2 ref="title" > Welcome to {
   {n}}</h2>
        <hr>
        <SchoolName :getSchoolName="getSchoolName"></SchoolName>
        <StudentName ref="Student"></StudentName>
<!-- <StudentName v-on:stuName="getStudentName"></StudentName>-->
<!-- <StudentName @stuName="getStudentName"></StudentName>-->

    </div>
</template>

<script> import SchoolName from "@/components/School"; import StudentName from "@/components/Student"; export default {
       components:{
       SchoolName, StudentName }, data(){
       return {
       n:'CSDN' } }, methods:{
       getSchoolName(name){
       console.log('App The component has received the name of the school ：',name) }, getStudentName(name){
       console.log('App The component has received the student's name ：',name) } }, mounted() {
       setTimeout(() => {
       this.$refs.Student.$on('stuName',this.getStudentName) },3000) } } </script>

If we want this event to be triggered only once ：

• If the first binding method is used , Just use the event modifier directly
  

• If the second binding method is used , Then call another Api
  

If you want to pass multiple data , There are two ways ：

• Directly pass an object to
• Use ES6 Of …params grammar

A small summary

The parent component is using props Passing data to subcomponents , But if the fruit component wants to pass the data back , You need to use custom events ！

We can use v-on Binding custom events , Every Vue All instances implement the event interface (Events interface), namely ：

• Use $on(eventName) Monitoring events
• Use $emit(eventName) Triggering event

in addition , The parent component can be used directly where the child component is used v-on To listen for events triggered by subcomponents .