Deeply understand the communication mode of data transfer from the child component of Vue component to the parent component. Read this article in detail. It is recommended to collect

catalogue

There are many communication methods for Vue child components to transfer data to parent components. I list three here.

Method 1: using props to implement

Method 2: use v-on or @, bind a custom event implementation to the instance object of component Student

Method 3: use ref to bind a custom event implementation to the instance object of component Student

There are many communication methods for Vue child components to transfer data to parent components. I list three here.

Method 1: using props to implement

The parent component passes a function to the child component through props. When the child component triggers an event, it calls this function and transmits its own data to the parent component. In essence, it communicates between the parent and the child

Case: App is the parent component. There is a child component School below. The functions are as follows: click the button of the School component to transfer its own data: School name to the parent component App, and the parent component prints the data on the console

Step 1: in the methods of the parent component App.vue, configure a function getSchoolName(), whose formal parameter is name, and print the school name of the passed child component on the console

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <School :getSchoolName="getSchoolName"></School>
    <Student></Student>
  </div>
</template>

<script>
// Introduction component
import School from "./components/School";
import Student from "./components/Student";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "I am the parent component App",
    };
  },
  methods: {
    getSchoolName(name){
      console.log("App I got it School of name",name)
    }
  },
};
</script>

<style >
.app {
  background-color: lightblue;
  padding: 5px;
}
</style>

Core in Code:  

 

Step 2: pass the function getSchoolName of the parent component App.vue to the child component School.vue through props

Step 3: trigger the click event in the sub component. When the event responds, obtain the corresponding name data, and then call the method passed by the parent component to pass in the name data

Subcomponents   School component: School.vue

<template>
<!-- Structure of components -->
    <div id="demo1">
        <h2>I am App Sub components of School</h2>
        <h2>School Name:{{name}}</h2>
        <h2>School address:{{address}}</h2>
        <button @click="sendSchoolName">Pass the school name to App</button>
    </div>
</template>


<script>
// Component interaction, such as data and methods
export default {
    name:'School', //Generally, it should be consistent with the file name
    props:['getSchoolName'],
    data() {
        return {
            name:'Hunan University ',
            address:'Changsha'
        }
    },
    methods: {
        sendSchoolName(){
            this.getSchoolName(this.name)
        }
    },
}

</script>

<style>
/* Component style */
#demo1{
    background-color: #bfa;
    padding: 5px;
}
</style>

Core in Code:  

Click the button to view the effect displayed on the console

Method 2: use v-on or @, bind a custom event implementation to the instance object of component Student

Case: App is the parent component, and there is a child component Student below. Its functions are as follows: click the Student component button to transfer its own data: Student name to the parent component App, and the parent component prints the data on the console

Step 1: in the parent component App.vue, bind a custom event to the instance object of the child component Student

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <!-- Passing a function type from a parent component to a child component props,Implementation: passing data from child to parent -->
    <School :getSchoolName="getSchoolName"></School>
    <!-- To component Student The instance object of is bound with a custom event to realize: the child passes data to the parent -->
    <Student v-on:demo="getStudentName"></Student>
  </div>
</template>

<script>
// Introduction component
import School from "./components/School";
import Student from "./components/Student";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "I am the parent component App",
    };
  },
  methods: {
    getSchoolName(name){
      console.log("App I got it School of name",name)
    },
    getStudentName(name){
      console.log('App I got it Student of name',name)
    }
  },
};
</script>

<style >
.app {
  background-color: lightblue;
  padding: 5px;
}
</style>

  For the core code, v-on in Figure 1 below can be abbreviated as @, that is, v-on:demo is equivalent to @ demo

Step 2: in the sub component Student.vue, bind the click response function to trigger the demo event on the Student component instance object

<template>
<!-- Structure of components -->
<!-- 
    function
        click Student The button of the component gives its own data: student name to the parent component App
 -->
    <div id="demo">
        <h2>I am App Sub components of Student</h2>
        <h2>Student Name:{{name}}</h2>
        <h2>Student age:{{age}}</h2>
        <button @click="sendStudentName">I'll pass the student's name to App</button>
    </div>
</template>


<script>
// Component interaction, such as data and methods
export default {
    name:'Student', //Generally, it should be consistent with the file name
    data() {
        return {
            name:'Lake University',
            age:18
        }
    },
    methods: {
        sendStudentName(){
            // Trigger the demo event on the Student component instance object
            this.$emit('demo',this.name)
        }
    },
}

</script>

<style >
/* Component style */
#demo{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
}
</style>

  Core code

Click the button to view the effect displayed on the console:

Differences between the above two methods:

Similarities: both have callback functions configured in the parent component for use by child components

difference:

      Method 1: using props, the parent component passes the callback function to the child component, the child component receives the function, and then calls the function in person

      Method 2: using $emit, the sub component triggers the response function of the event and executes the callback function. The sub component does not need to receive the function or call it in person

Method 3: use ref to bind a custom event implementation to the instance object of component Student

It also demonstrates the sub component Student.vue and the parent component App.vue. There is no need to modify the sub component Student.vue.

You only need to modify the parent component App.vue through   ref   Attribute gives an ID reference to the sub component Student.vue. Through this.$refs.student, you can get the instance object of the sub component

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <!-- Passing a function type from a parent component to a child component props,Implementation: passing data from child to parent -->
    <School :getSchoolName="getSchoolName"></School>
    <!-- use v-on perhaps@,To component Student The instance object of is bound with a custom event to realize: the child passes data to the parent -->
    <!-- <Student v-on:demo="getStudentName"></Student> -->
    
    <!-- use ref,To component Student The instance object of is bound with a custom event to realize: the child passes data to the parent -->
    <Student ref="student"></Student>
  </div>
</template>

<script>
// Introduction component
import School from "./components/School";
import Student from "./components/Student";
export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "I am the parent component App",
    };
  },
  methods: {
    getSchoolName(name){
      console.log("App I got it School of name",name)
    },
    getStudentName(name){
      console.log('App I got it Student of name',name)
    }
  },
  mounted() {
    this.$refs.student.$on('demo',this.getStudentName)
  },
};
</script>

<style >
.app {
  background-color: lightblue;
  padding: 5px;
}
</style>

Core code:  

Click the button to view the effect displayed on the console:

The method of using ref is more flexible and can realize more functions. For example, after a period of time, data is transmitted to the parent component. The solution is to write a timer callback function in mounted, for example, print out after 5 seconds  

Methods one and two cannot be so flexible

Have you learned the above three methods?

Tags: Front-end Vue Vue.js

Posted on Sun, 28 Nov 2021 04:06:07 -0500 by koglakci