怎么实现系列：3.vue-父组件怎么监听子组件销毁的生命周期

Alin
677 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

系列介绍

经常会被面试官问到这个怎么实现，或者怎么实现xx？

有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬

于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。

本系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论

场景

面试官：vue的生命周期有了解吧，有这么一个场景，父组件里有一个子组件。子组件销毁了，那父组件怎么监听到子组件销毁的生命周期？

（思考了一会）

我：呃...这个我没有监听过

面试官：...

查阅资料

不会实现没有关系，后面马上去查阅相关资料，学习一下怎么实现父组件监听子组件的生命周期

实现

先使用vue-cli脚手架快速创建一个基本vue工程出来

然后创建两个组件：parent.vue和child.vue

在parent组件里引入child组件

parent.vue

<template>
  <div>
    <child />
  </div>
</template>
<script>
import child from './child1.vue'
export default {
  components: {
    child,
  },
}
</script>

child.vue


    <template>
    <div>子组件</div>
    </template>
    <script>
    export default {}
    </script>

再在App.vue里面引入parent组件


<template>
  <div id="app">
    <parent />
  </div>
</template>
​
<script>
import parent from './components/parent.vue'
export default {
  name: 'App',
  components: {
    parent,
  },
}
</script>

好的，整个基础工程搭建完毕。接下来开始实现过程

方案一 在子组件的生命周期里emit一个事件出来

  1. 在子组件里的destroyed生命周期里，emit一个事件出来

    
destroyed() {
    this.$emit('destroy')
  },

  2. 在父组件里监听对应事件

    
<div>
    <child @destroy="destroyHandle" />
</div>

  3. 在父组件里增加一个按钮，来销毁子组件

    同时完善一下父组件代码

    <template>
  <div>
    <child v-if="show" @destroy="destroyHandle" />
    <button @click="clickHandler">销毁子组件</button>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components: {
    child,
  },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    destroyHandle() {
      console.log('子组件销毁了')
    },
    clickHandler() {
      this.show = false
    },
  },
}
</script>

    到浏览器查看效果

0001.png

点击按钮后，可以看到控制台打印出子组件销毁了

0002.png

说明可以监听到子组件的destroyed生命周期，说明该方案可行

方案二 vue会把组件对应的生命周期hook暴露出来，监听对应的hook即可

改造一下上面parent.vue和child.vue的代码

parent.vue


<template>
  <div>
    <child v-if="show" @hook:destroyed="destroyHandle" />
    <button @click="clickHandler">销毁子组件</button>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components: {
    child,
  },
  data() {
    return {
      show: true,
    }
  },
  methods: {
    destroyHandle() {
      console.log('子组件销毁了')
    },
    clickHandler() {
      this.show = false
    },
  },
}
</script>

child.vue


<template>
  <div>子组件</div>
</template>
    <script>
export default {}
</script>

到浏览器点击按钮，可以看到控制台打印除 子组件销毁了

说明这种方案也是可行的

小结

以上两中方案都是可行的，父组件可以监听到子组件的生命周期

我暂时只想到这两种方案

avatar
文章
阅读
粉丝