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

Z时代
2024-01-10
分类：技术分享

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

父组件代码如下：

<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，请问这种修改父组件变量的思路对吗？或者这种场景有其他更好的解决方案？
麻烦各位大佬指点，谢谢了~

回答

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

// 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就可以了（不过不建议，还是推荐上面的，比较符合组件的思想）。

可以用 .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>