javascript - Problèmes de division des composants et d'utilisation des combinaisons dans Vue

Question

Je suis nouveau sur Vue. Je fais actuellement un petit exercice avec un composant grille et un composant dialogue. Il y a un bouton de suppression pour chaque ligne de la grille. Après avoir cliqué, une fenêtre contextuelle vous demandera si vous souhaitez la supprimer. Le composant de la grille est le suivant :

image du composant de dialogue ci-dessous :

Créez une instance de vue dans App.vue et introduisez le composant grille. Maintenant, je ne sais pas si la boîte de dialogue doit être introduite dans App.vue ou dans la grille. Si elle était introduite dans la grille, la grille ne serait-elle pas trop profondément couplée au dialogue ? Si une boîte de dialogue est introduite dans l'application, contrôler si la boîte de dialogue est affichée ou non doit être contrôlé dans l'application, mais je pense que la fermeture de la boîte de dialogue doit être contrôlée par la boîte de dialogue.
Mon approche actuelle consiste à introduire respectivement gird et dialog dans App.vue Lorsque vous cliquez sur le bouton Supprimer, un événement est émis dans gird, l'événement est surveillé dans App et la valeur qui contrôle si la boîte de dialogue est affichée est modifiée en. vrai. Lorsque vous cliquez sur le bouton de fermeture de la boîte de dialogue, un événement est émis. L'application écoute l'événement et modifie la valeur qui contrôle si la boîte de dialogue est affichée sur false. J'ai l'impression que cela ne devrait pas être traité de cette façon.
Veuillez me donner quelques conseils de la part des personnes âgées sur la façon de mieux diviser et combiner les composants. Merci!

Answer 1

Utilisez le modèle V pour « déguiser » le dialogue en entrée afin de réaliser un flux de données bidirectionnel parent-enfant

Sous-composante :

<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>

Père :

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

De cette façon, le parent modifie showDialog pour le masquer/afficher, et l'appel de close sur le composant enfant mettra également à jour la valeur de showDialog

Document officiel https://cn.vuejs.org/v2/guide... Composant de saisie de formulaire utilisant des événements personnalisés