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

原创

dufu

修改于 2024-07-26 18:00:31

2790

修改于 2024-07-26 18:00:31

文章被收录于专栏：vue

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

方法：

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

eg1:关闭子组件弹窗

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

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

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

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

handleCloseModal(){
      this.createModalShow = false
    },

eg2:刷新父页面列表

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

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度