javascript - vue中元件劃分與組合使用問題

Question

初學Vue，目前做個小練習，有一個grid元件和dialog元件。 gird中每行有個刪除按鈕，點選後彈跳視窗提醒是否刪除。 gird元件如下圖：

dialog元件下圖：

#在App.vue中建立vue實例，引入grid元件，現在不知道dialog是應該在App.vue中引入，還是在gird中引入。如果在grid中引入，grid不是就跟dialog耦合度太深了麼。如果在App中引入dialog，控制dialog是否顯示都得在App中來，但感覺關閉dialog應該是由dialog來控制的。
我目前的做法是在App.vue中分別引入了gird和dialog，當點擊刪除按鈕，gird中emit一個事件，在App監聽該事件，並修改控制dialog是否顯示的值為true。當點擊了dialog關閉按鈕，emit一個事件，App中監聽該事件，修改控制dialog是否顯示的值為false。感覺不該這樣來處理啊。
請各位前輩指導一下，怎麼劃分和組合使用組件更好。謝謝各位！

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...使用自訂事件的表單輸入元件