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

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!

You may also be interested in:
  • Vue's various implementation methods for modifying parent component props through child components
  • Detailed explanation of the case of Vue child component calling parent component method
  • Vue parent component calls child component function implementation
  • Detailed explanation of the event of triggering child components by clicking buttons in parent components in Vue
  • Example of passing values ​​between vue child components and parent components
  • Vue parent component monitors child component life cycle
  • How does a Vue parent component get variables in a child component
  • Detailed analysis of Vue child components and parent components

<<:  Install MySQL 5.7 on Ubuntu 18.04

>>:  Detailed explanation of the pitfalls of MySQL 8.0

Recommend

JS+Canvas draws a lucky draw wheel

This article shares the specific code of JS+Canva...

How to delete garbled or special character files in Linux

Due to encoding reasons, garbled characters will ...

How familiar are you with pure HTML tags?

The following HTML tags basically include all exis...

Analysis of MySQL data backup and recovery implementation methods

This article uses examples to describe how to bac...

VMware virtual machine installation CentOS 8 (1905) system tutorial diagram

The world-famous virtual machine software VMware-...

How to install MySQL 5.7.28 binary mode under CentOS 7.4

Linux system version: CentOS7.4 MySQL version: 5....

The perfect solution for Vue routing fallback (vue-route-manager)

Table of contents Routing Manager background gett...

How to use JS to check if an element is within the viewport

Preface Share two methods to monitor whether an e...

A quick guide to Docker

Docker provides a way to automatically deploy sof...

How to install ionCube extension using pagoda

1. First install the pagoda Installation requirem...

How to use Web front-end vector icons

Preface When writing front-end pages, we often us...

WeChat applet custom tabbar component

This article shares the specific code of the WeCh...