Several ways to pass data from parent components to child components in Vue

I have been studying the source code of Vue recently and summarized several methods of transferring data between parent and child components in Vue.

1. props & events

The parent component passes props data to the child component, and the child component returns data to the parent component by triggering events. The code is as follows:

//Subcomponent <template>
    <div @click="changeName('YYY')">{{name}}</div>
</template>
<script>
export default{
    props:['name'], //or props:{name:{type:String,default:''}}
    methods:{
        //You cannot modify props data in child components, you should trigger an event for the parent component to handle changeName(newName){
            this.$emit('changeName',newName)
        }
    }
}
</script>
 
//Parent component <template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        data(){
            return {name:'XXX'}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</script>

The above is a complete process. The parent component passes data to the child component through props, and the child component triggers the event, which is listened by the parent component and processed accordingly.

2.ref

The ref attribute can be defined on a child component or native DOM. If it is on a child component, it points to the child component instance. If it is on the native DOM, it points to the native DOM element (which can be used for element selection, eliminating the trouble of querySelector).

The idea of ​​passing data is: get the child component instance through ref in the parent component, then call the child component method and pass the relevant data as parameters. The code is as follows:

//Subcomponent <template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:''
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>
 
//Parent component <template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg('Parent Message');
            }
        }
    }
</script>

3. provide & inject are not officially recommended for use in production environments

Provide means to provide. When a component provides a data through provide, its descendant components can use inject to accept the injection, so that they can use the data passed by the ancestor component. The code is as follows:

//child
<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:['appName']
}
</script>
 
//root 
export default{
    data(){
        return {
            appName:'Test'
        }
    },
    provide:['appName']
}

4.vuex

Vue's officially recommended global state management plug-in. No details.

This concludes this article about several methods of passing data from parent components to child components in Vue. For more information about passing data from parent components to child components in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!