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

Summary of the top ten problems of MySQL index failure

Table of contents background 1. The query conditi...

How to view the database installation path in MySQL

We can view the installation path of mysql throug...

Detailed explanation of the usage of compose function and pipe function in JS

Table of contents compose function Array.prototyp...

How are Vue components parsed and rendered?

Preface This article will explain how Vue compone...

Reasons why MySQL kill cannot kill threads

Table of contents background Problem Description ...

Detailed analysis of Vue child components and parent components

Table of contents 1. Parent components and child ...

How to install Chrome browser on CentOS 7

This article introduces how to install Chrome bro...

Guide to Efficient Use of MySQL Indexes

Preface I believe most people have used MySQL and...

MySQL chooses the appropriate data type for id

Table of contents Summary of Distributed ID Solut...

It's the end of the year, is your MySQL password safe?

Preface: It’s the end of the year, isn’t it time ...

Solution to index failure in MySQL due to different field character sets

What is an index? Why create an index? Indexes ar...

How to enable the root account in Ubuntu 20.04

After Ubuntu 20.04 is installed, there is no root...

Solution to transparent font problem after turning on ClearType in IE

The solution to the transparent font problem after...