Preface
A highlight of the vue project is componentization. Using components can greatly increase the reuse rate of code in a project and reduce the amount of code. However, the biggest difficulty in using components is communication between parent and child components.
Son corresponds to the father
Parent component
<template>
<div class="parent">
I'm the parent component
<!--Parent component listens to child component triggeredsaymethod，Call your ownparentSaymethod-->
<!--pass:msgPass the parent component's data to the child component-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>
<script>
import Children from './'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// Parameters are the data passed from subcomponentsparentSay(msg){
(msg) // hello, parent
}
},
// Introduce subcomponentscomponents:{
children: Children
}
}
</script>
Subcomponents
<template>
<div class="hello">
<div class="children" @click="say">
I'm a child component
<div>
The parent component said to me：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
//The data passed in by the parent component through the props attributeprops: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// The child component triggers the defined functions in the parent component through the emit method, thereby passing the data in the child component to the parent componentsay(){
this.$emit('say' , );
}
}
}
</script>
The child component uses the $emit method to call the parent component's method to achieve the purpose of the child communicating with the parent.
Father corresponds to the child
Parent component
<!--Html-->
<template>
<!--Parent component triggersclickmethod-->
<div class="parent" @click="say">
I'm the parent component
<!--passrefMark subcomponents-->
<children ref="child"></children>
</div>
</template>
<script>
import Children from './'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// Call the parentSay method of the child component through $refssay(){
this.$();
}
},
// Introduce subcomponentscomponents:{
children: Children
}
}
</script>
Subcomponents
<template>
<div class="hello">
<div class="children" >
I'm a child component
<div>
The parent component said to me：{{msg}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ''
}
},
methods: {
// The JavaScript method parentSay called by the parent componentparentSay(msg){
= msg;
}
}
}
</script>
The parent component calls the child component's method through $refs.
The above is how parent-child components communicate. Parent-child components use props to pass data directly, or use $emit and $refs to rely on events to pass data.
Parent-son component communication improvement article
In the above, the child communication parent triggers the click event in the child and then calls the method of the parent component. The parent communication child triggers the click event in the parent to call the method of the child component. However, in actual situations, the child component does not allow click events when the child communicates with the parent, and the event is in the parent or the click events when the parent communicates with the child.
Child communication parent time strike event in parent component
This situation is actually very common. For example, when submitting a form, the content of the form is a child component, and the save button is on the parent component. Click the Save button at this time to get the value of the subcomponent form. In this case, it is no longer just a child communication parent and a father communication child. It is necessary to use the two together to complete the entire communication process.
The implementation idea is to call the child component method through parent-child communication when clicking an event in the parent component, and then use child-parent communication to call another method of the parent component in the method in the child component and pass the information back. Here is a code demonstration:
Parent component
<template>
<div class="parent" @click="getData">
I'm the parent component
<!--Parent component listens to child component triggeredtransDatamethod，Call your owntransDatamethod-->
<!--passrefMark subcomponents-->
<children ref="child" @transData="transData"></children>
</div>
</template>
<script>
import Children from './'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// Call the getData method of the child componentthis.$();
},
// Parameters are the data passed from subcomponentstransData(msg){
(msg) // hello, parent
}
},
// Introduce subcomponentscomponents:{
children: Children
}
}
</script>
Subcomponents
<template>
<div class="hello">
<div class="children" >
I'm a child component
<div>
Data of subcomponents：{{childrenSay}}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// The child component triggers the defined functions in the parent component through the emit method, thereby passing the data in the child component to the parent componentgetData() {
this.$emit('transData' , );
}
}
}
</script>
Another situation is the same as this, the basis is to communicate with the father and communicate with the son and the father.
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.