vue监听子组件的声明周期

陆康永2024-10-15 17:43

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

复制代码

<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其实给我们准备好了这样的一个事件的，只是文档上面没有提供（存疑🤨）

复制代码

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

@hook改为@vue

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

复制代码

<任意组件
      @vue:mounted="onMounted"
      @vue:beforeUnmount ="onBeforeUnmount"
      @vue:unmounted ="onUnmounted"
    ></任意组件>