recherche

Maison  >  Questions et réponses  >  le corps du texte

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

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!

漂亮男人漂亮男人2775 Il y a quelques jours602

répondre à tous(1)je répondrai

  • 習慣沉默

    習慣沉默2017-05-19 10:39:17

    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

    répondre
    0
  • Annulerrépondre