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

在一个项目中有一个主页面,一个弹层,现在我把它们做成了父组件与子组件,点击父组件中的“显示弹层”按钮则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,请问这种修改父组件变量的思路对吗?或者这种场景有其他更好的解决方案?
麻烦各位大佬指点,谢谢了~

回答:

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

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

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

回答:

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注