javascript - Masalah dengan bahagian komponen dan penggunaan gabungan dalam vue

Question

Saya baru menggunakan Vue. Saya sedang melakukan latihan kecil dengan komponen grid dan komponen dialog. Terdapat butang padam untuk setiap baris dalam grid Selepas mengklik, tetingkap pop timbul akan meminta sama ada untuk memadamnya. Komponen grid adalah seperti yang ditunjukkan di bawah:

gambar komponen dialog di bawah:

Buat contoh vue dalam App.vue dan perkenalkan komponen grid Sekarang saya tidak tahu sama ada dialog itu perlu diperkenalkan dalam App.vue atau grid. Jika diperkenalkan dalam grid, bukankah grid akan digabungkan terlalu dalam dengan dialog? Jika dialog diperkenalkan dalam Apl, mengawal sama ada dialog dipaparkan atau tidak mesti dikawal dalam Apl, tetapi saya merasakan bahawa menutup dialog harus dikawal oleh dialog.
Pendekatan semasa saya ialah memperkenalkan gird dan dialog masing-masing dalam App.vue Apabila butang padam diklik, acara dipancarkan dalam gird, acara dipantau dalam App dan nilai yang mengawal sama ada dialog dipaparkan ditukar kepada. benar. Apabila butang tutup dialog diklik, acara dipancarkan Apl mendengar acara dan menukar nilai yang mengawal sama ada dialog dipaparkan kepada palsu. Saya rasa ia tidak sepatutnya ditangani dengan cara ini.
Sila beri saya panduan daripada warga emas tentang cara membahagikan dan menggabungkan komponen dengan lebih baik. Terima kasih!

Answer 1

Gunakan v-model untuk 'menyamar' dialog sebagai input untuk mencapai aliran data dwiarah ibu bapa dan anak

Subkomponen:

<template>
    <p v-if="value">
        <a href="javascript:;" @click="close">关闭</a>
    </p>
</template>
<script>
export default {
    props:{
        value:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            isShow: this.value
        }
    },

    methods: {
        close() {
            this.isShow = false
            this.$emit("input", this.isShow)
        }
    }
}
</script>

Ayah:

<Child v-model="showDialog"></Child>
data:{
    showDialog:false
}

Dengan cara ini, apabila ibu bapa menukar showDialog, ia boleh disembunyikan/ditunjukkan, dan panggilan tutup pada komponen anak juga akan mengemas kini nilai showDialog

Dokumen rasmi https://cn.vuejs.org/v2/guide... Borang input komponen menggunakan acara tersuai