vue中父子组件交互问题

Question

问题描述

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

用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我也想过, 但我觉得这样更不好

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

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

Answer 1

sync 修饰符了解一下。

<component-child :visible.sync="isShow"></component-child>

// 子组件内的关闭方法
handleClose() {
   this.$emit('update:visible', false);
}

Answer 2

<component-child @cancel=cancel></component-child>
父组件中定义cancel函数

Answer 3

可以在子组件里面写入参数isShow 去控制子组件的方法，然后用$emit把它传输出来，这样就不会依赖于父组件的参数，一般封装组件都是这样写

Answer 4

你需要有个一个popupWindowManager的类来管理所有弹窗。。。

父组件调用这个

popupWindowManager.popup(弹窗组件，closeHandler)