Vue中子组件与父组件事件交互的推荐方法

2024-07-26 18:00:31 浏览数 (2)

应用场景：比如子组件某个事件后需要触发父组件进行弹窗关闭，需要触发父页面进行父页面列表刷新等等。

方法：

1、在子组件定义发送事件

eg1:关闭子组件弹窗

代码语言：txt复制

close(){
      //发送关闭事件给父组件
      this.$emit('close-modal');
    }

2、在父类组件增加定义事件接收处理方法

代码语言：txt复制

<CreateLabelModal :info='labelInfo' :type="actionType" @close-modal="handleCloseModal"></CreateLabelModal>

3、编写接收事件处理逻辑，这里处理关闭子组件弹窗

代码语言：txt复制

handleCloseModal(){
      this.createModalShow = false
    },

eg2:刷新父页面列表

同理可以在上述关闭弹窗的方法里调用接口重新刷新列表

代码语言：txt复制

handleCloseModal(){
      this.createModalShow = false
      //关闭弹窗后刷新父页列表
      this.search()
    },

0 人点赞