vue父组件控制子组件显示隐藏的问题

Question

在一个项目中有一个主页面，一个弹层，现在我把它们做成了父组件与子组件，点击父组件中的“显示弹层”按钮则popup子组件显示，如下图：

父组件代码如下：

<template>
    <div class="parent">
        <button @click="showPanel">显示弹窗</button>
        <v-popup v-show="panelShow" :panelShow="panelShow"></v-popup>
    </div>
</template>

export default {
    data() {
        return {
            panelShow: false
        }
    },
    methods: {
        showPanel() {
          this.panelShow = true;
        }
    },
    components: {
      'v-popup': Popup
    }
}

现在父组件能够操控弹窗是否显示。但在popup组件中也有一个关闭弹窗的按钮，我想修改父组件中的panelShow变量来控制弹窗的隐藏，popup组件代码如下：

<div class="popup">
    <button @click="hidePanel">关闭弹窗</button>
</div>

export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
            //这里应该怎么修改父组件的值呢?这段代码会报错，
            //提示子组件不能修改父组件的值
            //this.panelShow = false;  ✗
        }
    }
}

我用的是vue2.5，请问这种修改父组件变量的思路对吗？或者这种场景有其他更好的解决方案？
麻烦各位大佬指点，谢谢了~

Answer 1

这么写的话耦合性太高，组件不应该包含太多业务逻辑，比较合理的是当你点击关闭按钮的时候，你告诉外界你已经点了关闭按钮，外界收到了消息，再执行相应的操作(关闭弹窗)。

// popup组件
hidePanel() {
   this.$emit('clickedHidePanel');
}

// 父组件
<template>
  <v-popup @hidePanel=hidePanel v-show="panelShow" :panelShow="panelShow"></v-popup>
</template>

// methods增加相应的方法
hidePanel () {
    this.panelShow = false;
}

如果你觉得这种方法太麻烦的话，也可以按照你的思路，使用this.$parent这个api就可以了（不过不建议，还是推荐上面的，比较符合组件的思想）。

Answer 2

可以用 .sync 来实现一个双向绑定，具体实现如下：

在父组件的模板上：

<template>
    <div class="parent">
        <button @click="showPanel">显示弹窗</button>
        // 把显示隐藏扔给子组件处理，即 v-show 放到子组件上
        // <v-popup v-show="panelShow" :panelShow="panelShow"></v-popup>
        <v-popup :panelShow.sync="panelShow"></v-popup>
    </div>
</template>

子组件的代码：

<template>
    // 在这里控制显示隐藏
    <div v-show="panelShow" class="popup">
        <button @click="hidePanel">关闭弹窗</button>
    </div>
</template>

<script>
export default {
    props:{
        panelShow: {
            type: Boolean
        }
    },
    methods: {
        hidePanel() {
            // 下面的语句配合开头写的 .sync 就会更新父组件中的 panelShow 变量
            this.$emit('update:panelShow', false)
        }
    }
}
</script>

最后，在子组件对外提供的 api 设计上 ，建议把 showPanel 这个 prop 名称改成 visible，感觉会更直观，这方面可以参考下 element-ui 的 el-dialog

Answer 3

办法很多，
1.可以用事件， 点击按钮的时候 触发一个事件，通知父组件
2.可以在模版里用slot 把按扭的html写在父亲组件里
3.用v-modal (其实实现的方法就是第一种方式，但是可以少写很多代码）

Answer 4

我对vue不太熟，一般采用属性传递的方式：
1，比如弹层组件有一个show属性；
2，父组件控制子组件的show属性,或者调用子组件的show()方法；
3，子组件控制自己的show属性,或者提供自己的组件方法供父调用。