vue监听子组件的声明周期

如何在父组件里面监听【第三方子组件】的生命周期

场景

复制代码
<template>
<button     @click="a=1">1</button>
<button     @click="a=2">2</button>
<el-input type="date" v-model="b" v-if="a==1"/>
</template>

我们想只有a等于1的时候才携带字段b给后端,如果我们a为1时候选择了日期,那变量b就有值了,在切换变量a为2的时候,虽然input不显示,但是变了b依旧就有值,实际上我们不需要b变量的值了的

点击button时候坐下判断就好,为2的时候就移除b的值,那如果input的显示背多个变量控制而不是单纯a变量呢,那就会在其他按钮点击的时候继续重置b的值

问题

会导致多个地方重置input关联的b的变量再多个地方被重置

期待

如果可以监听到input背销毁的生命周期就好了

vue其实给我们准备好了这样的一个事件的,只是文档上面没有提供(存疑🤨)

子组件生命周期事件

文档VNode Lifecycle Events | Vue 3 Migration Guide

vue2

复制代码
<任意组件
      @hook:mounted="onMounted"
      @hook:updated="onUpdated"
      @hook:beforeDestroy="onBeforeDestroy"
    ></任意组件>

vue3

@hook改为@vue

且生命周期钩子名字要按照vue3的名字来

复制代码
<任意组件
      @vue:mounted="onMounted"
      @vue:beforeUnmount ="onBeforeUnmount"
      @vue:unmounted ="onUnmounted"
    ></任意组件>
相关推荐
百万蹄蹄向前冲1 分钟前
组建百万前端梦之队-计算机大学生竞赛发展蓝图
前端·vue.js·掘金社区
云隙阳光i14 分钟前
实现手机手势签字功能
前端·javascript·vue.js
imkaifan34 分钟前
vue2升级Vue3--native、对inheritAttrs作用做以解释、声明的prop属性和未声明prop的属性
前端·vue.js·native修饰符·inheritattrs作用·声明的prop属性·未声明prop的属性
小程序设计34 分钟前
【2025】基于springboot+vue的宠物领养管理系统(源码、万字文档、图文修改、调试答疑)
vue.js·spring boot·宠物
觉醒法师36 分钟前
HarmonyOS NEXT - 电商App实例三( 网络请求axios)
前端·华为·typescript·axios·harmonyos·ark-ts
小程序设计1 小时前
【2025】基于springboot+vue的体育场馆预约管理系统(源码、万字文档、图文修改、调试答疑)
vue.js·spring boot·后端
Danta1 小时前
HTTP协议版本演进:从HTTP/0.9到HTTP/3的高分面试回答
前端·网络协议·面试
柠檬树^-^1 小时前
app.config.globalProperties
前端·javascript·vue.js
太阳花ˉ1 小时前
react(一):特点-基本使用-JSX语法
前端·react.js
赵大仁1 小时前
深入解析 React Diff 算法:原理、优化与实践
前端·react.js·前端框架