So übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue

Dieser Artikel vermittelt Ihnen relevantes Wissen über vue. Er fasst hauptsächlich verschiedene Methoden zum Übergeben von Daten zwischen übergeordneten und untergeordneten Komponenten in Vue zusammen, einschließlich Requisiten und Ereignisse, Ref-Attribute, Bereitstellung und Injektion usw. Werfen wir einen Blick darauf Ich hoffe, dass der Referenzwert für alle hilfreich ist.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial]

Ich habe kürzlich den Quellcode von Vue studiert und mehrere Methoden zum Übergeben von Daten zwischen übergeordneten und untergeordneten Komponenten in Vue zusammengefasst .

1.props & event

Die übergeordnete Komponente übergibt Requisitendaten an die untergeordnete Komponente, und die untergeordnete Komponente gibt Daten an die übergeordnete Komponente zurück, indem sie das Ereignis auslöst. Der Code lautet wie folgt:

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

Das Obige ist vollständig Prozess Die übergeordnete Komponente leitet die Daten über props an die untergeordnete Komponente weiter. Die untergeordnete Komponente löst das Ereignis aus, das von der übergeordneten Komponente überwacht und entsprechend verarbeitet wird.

2.ref

Das ref-Attribut kann auf einer Unterkomponente oder einem nativen DOM definiert werden. Wenn es sich auf einer Unterkomponente befindet, zeigt es auf die Unterkomponenteninstanz (Kann zur Elementauswahl verwendet werden. Sparen Sie sich die Mühe mit querySelector.)

Die Idee der Datenübergabe: Rufen Sie die Unterkomponenteninstanz über ref in der übergeordneten Komponente ab, rufen Sie dann die Unterkomponentenmethode auf und übergeben Sie die relevanten Daten als Parameter. Der Code lautet wie folgt:

//子组件 
<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 wird offiziell nicht für die Verwendung in Produktionsumgebungen empfohlen

provide bedeutet, Daten bereitzustellen, wenn eine Komponente Daten über „provide“ bereitstellt, können ihre Nachkommenkomponenten „inject“ verwenden, um die Injektion zu akzeptieren. sodass Daten verwendet werden, die von Vorgängerkomponenten übergeben wurden. Der Code lautet wie folgt:

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

[Verwandte Empfehlungen: Javascript-Video-Tutorial, vue.js-Tutorial]

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!