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"
    ></任意组件>
相关推荐
Anlici39 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫41 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼1 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js