问题描述

有这样一个简单的需求: 页面有一个按钮, 点击会有一个弹窗, 弹窗上有个关闭按钮, 点击可以关闭这个弹窗

用vue的组件来做大约是这样的

<component-parent>
    <component-child>
        ....我是内容....
        <button>点我关闭</button>
    </component-child>
    
    <button>点我打开</button>
</component-parent>

问题出现的环境背景及自己尝试过哪些方法

我的实现方式是这样的:

• 打开操作(父组件操作):

  show(){
      this.isShow = true
      .....做其他的事情....
  }
  hide(){
      this.isShow = false
  }

• 关闭操作(子组件操作):

     this.$parent.hide()

这样做能实现功能, 但是就是不太优雅, 因为这样父组件必须实现子组件调用的方法/属性, 耦合会很高

emit我也想过, 但我觉得这样更不好

你期待的结果是什么？实际看到的错误信息又是什么？

希望能找到一个最优解, 只在子组件里面做操作, 不依赖父组件, 谢谢!