vue父组件监听子组件生命周期

最新推荐文章于 2023-05-31 10:39:55 发布

---果子---

最新推荐文章于 2023-05-31 10:39:55 发布

阅读量370

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_41424721/article/details/115999086

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中如何实现父子组件之间的通信，包括子组件触发父组件的方法以及父组件监听子组件生命周期的方法。主要涉及`$emit`事件触发和`@hook`监听生命周期钩子，如`created`和`mounted`，展示了两种不同的通信和监听策略。

摘要由CSDN通过智能技术生成

1、子组件

<template>
<div>子组件</div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  created () {
    /**
     * 方法二
     * 通过@hook 监听 @hook:created="parentMethods2"(created是子组件生命周期)
     * 父组件事件parentMethods2监听到了子组件生命周期created
     */
  },
  mounted () {
    /**
     * 方法一
     * 子组件触发父组件的方法通过绑定事件(@methods1="parentMethods1")
     * 在子组件使用this.$emit('methods1')触发此事件
     */
    this.$emit('methods1')
  }
}
</script>
<style scoped lang="less">

</style>

2、父组件

<template>
<div>

  <Child @hook:created="parentMethods2" @methods1="parentMethods1"/>
</div>
</template>
<script>

/**
 * 方法一 @methods1="parentMethods1
 * 有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就
 * 做一些逻辑处理，可以通过以下写法实现
 *
 * 方法二  @hook:created="parentMethods2"
 * 更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可
 * @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，
 * 例如：created，updated 等都可以监听。
 */
import Child from './child'
export default {
  components: {
    Child
  },
  methods: {
    parentMethods1 () {
      console.log('父组件监听到子组件 mounted 钩子函数 ...')
    },
    parentMethods2 () {
      console.log('父组件监听到子组件 mounted 啦 ...')
    }
  }
}
</script>
<style scoped lang="less">

</style>