Vue子组件触发父组件中的方法( 给子组件绑定自定义事件 )

永远保持一颗学徒的心
请问你是怎么走出困境的? 答: 多走几步

给子组件绑定自定义事件( 使用$emit )触发父组件中的方法,话不多说看下面代码

< 我这里出现了异步的问题用定时器解决了也写在下面了 >

我这里是点击新建按钮显示弹窗( 新建按钮是父组件中的,弹窗是子组件 )

然后进行新建并显示数据问题是点击弹窗中的提交按钮后不及时更新所以需要调用父组件中显示数据的方法并用定时器处理异步问题

子组件

使用$emit发出消息通知父组件
我这里是弹窗新建出现了异步不及时更新需要刷新后才可以
// 提交事件
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("abcClick");//自定义事件 此方法直接出发父组件中的显示数据的方法
          this.newList(); //新建接口的方法
          this.$Message.success("提交成功");
          this.$refs[formName].resetFields();
          this.dialogFormVisible = false;
        } else {
          this.$Message.error("请输入完整信息");
          return false;
        }
      });
    }

父组件

子组件在父组件中当做标签使用 接收传来的事件
<CreateVenue :isFlag="flage" @abcClick="sey"></CreateVenue>

这个事件触发父组件中显示数据的方法,使用定时器解决异步问题
// 子组件自定义事件
    sey() {
      setTimeout(() => {
        this.getList();//显示数据的方法
      }, 1000);
    }

 

猜你喜欢

转载自www.cnblogs.com/home-/p/11636604.html