Pass the value
Parent component passes value to child component
// Parent component<template>
<div>
<!-- Introduce child components into parent components，And pass in the required value in the subcomponent -->
<child :message="father"></child>
</div>
</template>
<script>
import child from './child'
export default {
data() {
return {
//Define the value to be passed in father: 'Value passed to child component'
}
},
components: {
child
}
}
</script>
// Subcomponents<template>
<div>
<div>{{message}}</div>
</div>
</template>
<script>
export default {
//Register props in the child component and use the data passed in the parent component props: {
message: String
},
}
</script>
Subcomponent pass values to parent component
// Parent component<template>
<div>
<!--Custom eventschild,The event isparent（parentEvents are used to receive values passed by subcomponents）-->
<parent @child="parent"></parent >
</div>
</template>
<script>
export default {
data: {
message: ''
},
methods: {
parent(val) {
= val;
}
}
}
</script>
// Subcomponents<template>
<div>
<!--Click the button to triggersendevent，BundlemessagePass to parent component-->
<button @click="send">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'I'm a child component'
}
},
methods: {
sendMes() {
this.$emit('child', );
}
}
}
</script>
Calling methods
Methods of parent component calling child component
// Parent component<template>
<div @click="handleParent">
<children ref="mychild"></children>
</div>
</template>
<script>
import children from ''
export default {
components: {
children
},
methods:{
handleParent() {
this.$();
}
}
}
</script>
// Subcomponents<template>
<div></div>
</template>
<script>
export default {
methods:{
childMethod() {
('My name is child')
}
}
}
</script>
Methods of child components calling parent components
// Parent component<template>
<div>
<child @listenChild="showFrom"></child>
<div>{{ value }}</div>
</div>
</template>
<script>
import child from './compontents/'
export default {
components:{child},
data () {
return {
value:''
}
},
methods: {
showFrom(data){
= data
},
}
}
</script>
//Subcomponent<template>
<button @click="send()">
I'm a child component,Click me to pass the value to the parent component
</button>
</template>
<script>
export default {
data(){
return {
message:'Subcomponent data'
}
},
methods:{
send() {
this.$emit("listenChild",)
}
}
}
</script>
Non-parent-child components
Broadcast custom events
handleClick(){
//response is the value to be passed this.$root.$emit('change',response)
}
Handle custom events
handleClick(){
this.$root.$on('change',(item)=>{
(item) //item is the response of broadcast events })
}
Sometimes, the event is triggered only once by emit, but the callback function is executed multiple times. This phenomenon often occurs when the page jumps and exits and re-enters.
Cause:
. In fact, it is adding an event listener to the Bus container. When the page jumps, the original vue component is logged out, but the event listener added by the original vue component to the Bus container will not be removed.
Therefore, when you enter the page corresponding to this vue component next time, when you execute this. ., a duplicate event listener will be added to the Bus container, and so on, resulting in many identical event listeners in the Bus container, resulting in the event being triggered only once, but the callback function is executed multiple times.
Solution:
In the vue component's beforeDetory hook function, manually remove all the time listeners added to the Bus container that are added to the vue component.
//Define a function in the methods field of the vue object to remove event listeners specificallyoffListener() {
this.$("Event Name");
this.$("Event Name");
this.$("Event Name");
},
//Call this function in the beforeDestroy hookbeforeDestroy() {
();
},
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.