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...使用自定义事件的表单输入组件