Comment transmettre des données du composant parent au composant enfant dans Vue

Cet article vous apporte des connaissances pertinentes sur vue Il résume principalement plusieurs méthodes de transmission de données entre les composants parent et enfant dans Vue, notamment les accessoires et les événements, les attributs de référence, la fourniture et l'injection, etc. la valeur de référence ci-dessous. J’espère qu’elle sera utile à tout le monde.

[Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js]

J'ai étudié le code source de vue récemment et j'ai résumé plusieurs méthodes de transmission de données entre les composants parent et enfant dans vue .

1.props & event

Le composant parent transmet les données des accessoires au composant enfant, et le composant enfant renvoie les données au composant parent en déclenchant l'événement. Le code est le suivant :

//子组件 
<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>

Ce qui précède est un. Processus terminé, le composant parent transmet les données via props. Transmis au composant enfant, le composant enfant déclenche l'événement, qui est surveillé par le composant parent et traité en conséquence.

2.ref

L'attribut ref peut être défini sur un sous-composant ou un DOM natif. S'il se trouve sur un sous-composant, il pointe vers l'instance du sous-composant. S'il se trouve sur un DOM natif, il pointe vers l'élément DOM natif. (peut être utilisé pour la sélection d'éléments, évitez les problèmes de querySelector).

L'idée de transmettre des données : obtenez l'instance du sous-composant via ref dans le composant parent, puis appelez la méthode du sous-composant et transmettez les données pertinentes en tant que paramètres. Le code est le suivant :

//子组件 
<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 n'est pas officiellement recommandé pour une utilisation dans les environnements de production

provide signifie fournir Lorsqu'un composant fournit des données via provide, ses composants descendants peuvent utiliser inject pour accepter l'injection, afin que Utiliser les données transmises par les composants ancêtres. Le code est le suivant :

//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;]
}

[Recommandations associées : Tutoriel vidéo javascript, Tutoriel vue.js]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!