Vue parent component calls child component function implementation

Vue parent component calls the function of the child component

The parent component calls the child component's function through the event. For example, the parent component allows the child component to send a request through a click event.

The project in the article has been created through scaffolding.

DEMO:

Father.js
<template>
    <div>
        <div>
            <son ref="son"></son>
            <input type="button" value="click" @click="useSonFun">
        </div>  
    </div>
</template>

<script>
import son from './son'
export default {
    components:{
        son
    },
    data(){
        return {
            
        }
    },
    methods: {
        useSonFun(){
            this.$refs.son.say(); //Give the child component a ref and call the function in the child component through ref}
    },
}
</script>

Son.js
<template>
    <div>
        <h1>SON</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    methods:{
        say(){//Subcomponent function that needs to be called by the parent component console.log("SON COMPONENT");
        }
    },
}
</script>

Rendering

The parent component calls the child component function. You can use it to send a request by clicking on the parent component. Based on the click event, the child component also sends a request. It can be distinguished from the parent component clicking to send a request, obtaining data, and then passing the data to the child component through the component value passing method.

Tips:

Father.js:
this.$refs.son.say (the parent component data can be passed to the child component in brackets);
Son.js:
say(receive data from parent component to child component){
	//Use of data}

This is the end of this article about the introduction and use of the observer pattern in Java design pattern. For more relevant observer pattern content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!