catalogue
Method 1: using props to implement
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> <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:{}</h2> <h2>School 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> <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:{}</h2> <h2>Student 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> <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?