How to pass data from parent component to child component in Vue

This article brings you relevant knowledge about vue, which mainly summarizes several methods of passing data between parent and child components in Vue, including props & event, ref attribute, provide & inject The content, etc., has certain reference value. Let’s take a look at it together. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, vue.js tutorial】

I am learning vue recently The source code summarizes several methods of transferring data between parent and child components in Vue.

1.props & event

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

//子组件 
<template>
    <div @click="changeName(&#39;YYY&#39;)">{{name}}</div>
</template>
<script>
export default{
    props:[&#39;name&#39;],//or props:{name:{type:String,default:&#39;&#39;}}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit(&#39;changeName&#39;,newName)
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        data(){
            return {name:&#39;XXX&#39;}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>

The above is a complete process. The parent component passes data to the child component through props, and the child component triggers an event, which is monitored 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 Native DOM elements (can be used for element selection, eliminating the trouble of querySelector).

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

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

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

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

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

[Related recommendations: javascript video tutorial, vue.js tutorial]

The above is the detailed content of How to pass data from parent component to child component in Vue. For more information, please follow other related articles on the PHP Chinese website!