Cara menghantar data daripada komponen induk kepada komponen anak dalam Vue

Artikel ini membawa anda pengetahuan yang berkaitan tentang vue, yang meringkaskan terutamanya beberapa kaedah menghantar data antara komponen induk dan anak dalam Vue, termasuk prop & acara, atribut ref, menyediakan & menyuntik kandungan, dsb. , mempunyai nilai rujukan tertentu Mari kita lihat bersama-sama saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Baru-baru ini belajar vue The kod sumber meringkaskan beberapa kaedah pemindahan data antara komponen induk dan anak dalam Vue.

1.props & event

Komponen induk menghantar data prop kepada komponen anak dan komponen anak mengembalikan data kepada komponen induk dengan mencetuskan acara tersebut berikut:

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

Komponen induk menghantar data kepada komponen anak melalui prop, dan komponen anak mencetuskan peristiwa, yang dipantau oleh komponen induk dan diproses dengan sewajarnya.

2.ref

Atribut ref boleh ditakrifkan pada subkomponen atau DOM asli Jika ia berada pada subkomponen, ia menunjuk ke contoh subkomponen DOM asli, ia menunjuk kepada elemen DOM Asli (boleh digunakan untuk pemilihan elemen, menghapuskan masalah querySelector).

Idea untuk menghantar data: Dapatkan contoh subkomponen melalui ref dalam komponen induk, kemudian panggil kaedah subkomponen dan hantar data yang berkaitan sebagai parameter. Kodnya adalah seperti berikut:

//子组件 
<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.menyediakan & menyuntik tidak disyorkan secara rasmi untuk digunakan dalam persekitaran pengeluaran

menyediakan cara untuk menyediakan apabila komponen menyediakan data melalui menyediakan, maka ia Komponen keturunan boleh menggunakan suntikan untuk menerima suntikan, supaya mereka boleh menggunakan data yang diluluskan oleh komponen nenek moyang. Kodnya adalah seperti berikut:

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

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Atas ialah kandungan terperinci Cara menghantar data daripada komponen induk kepada komponen anak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!