javascript – Probleme mit der Komponententeilung und Kombinationsverwendung in Vue

Question

Ich bin neu bei Vue. Ich mache gerade eine kleine Übung mit einer Rasterkomponente und einer Dialogkomponente. Für jede Zeile im Raster gibt es eine Schaltfläche zum Löschen. Nach dem Klicken werden Sie in einem Popup-Fenster gefragt, ob Sie sie löschen möchten. Die Rasterkomponente sieht wie folgt aus:

Dialogkomponentenbild unten:

Erstellen Sie eine Vue-Instanz in App.vue und führen Sie die Grid-Komponente ein. Jetzt weiß ich nicht, ob der Dialog in App.vue oder Grid eingeführt werden soll. Wäre das Raster bei Einführung in das Raster nicht zu eng mit dem Dialog verknüpft? Wenn ein Dialog in die App eingeführt wird, muss die Steuerung, ob der Dialog angezeigt wird oder nicht, in der App gesteuert werden, aber ich bin der Meinung, dass das Schließen des Dialogs durch den Dialog gesteuert werden sollte.
Mein aktueller Ansatz besteht darin, „gird“ bzw. „dialog“ in App.vue einzuführen. Wenn auf die Schaltfläche „Löschen“ geklickt wird, wird ein Ereignis in „gird“ ausgegeben, das Ereignis wird in der App überwacht und der Wert, der steuert, ob der Dialog angezeigt wird, wird in geändert WAHR. Wenn auf die Schaltfläche zum Schließen des Dialogs geklickt wird, wird ein Ereignis ausgegeben. Die App wartet auf das Ereignis und ändert den Wert, der steuert, ob der Dialog angezeigt wird, in „false“. Ich habe das Gefühl, dass es nicht so gehandhabt werden sollte.
Bitte geben Sie mir eine Anleitung von Senioren, wie ich Komponenten besser aufteilen und kombinieren kann. Danke schön!

Answer 1

使用 v-model 来将 dialog '伪装'成 input ,实现父子双向数据流

子组件：

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

父：

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

这样，父级改变 showDialog 可实现隐藏/显示，而子组件调用 close 也将更新 showDialog 的值

官方文档 https://cn.vuejs.org/v2/guide...使用自定义事件的表单输入组件