在 Vue.js 中，父组件不能直接监听子组件的生命周期钩子。然而，有几种方法可以实现父组件对子组件生命周期的间接监听或执行特定操作。

方法一：通过事件通信

子组件在生命周期钩子中触发自定义事件，父组件监听这些事件。

1. 子组件

复制
1<template>
2  <div>子组件</div>
3</template>
4
5<script>
6export default {
7  name: 'ChildComponent',
8  mounted() {
9    this.$emit('childMounted');
10  }
11}
12</script>

2. 父组件

复制
1<template>
2  <div>
3    <ChildComponent @childMounted="handleChildMounted" />
4  </div>
5</template>
6
7<script>
8import ChildComponent from './ChildComponent.vue';
9
10export default {
11  components: {
12    ChildComponent
13  },
14  methods: {
15    handleChildMounted() {
16      console.log('子组件已挂载');
17    }
18  }
19}
20</script>

方法二：使用 ref

父组件通过 ref 直接访问子组件实例，并在父组件的生命周期钩子中调用子组件的方法。

1. 子组件

复制
1<template>
2  <div>子组件</div>
3</template>
4
5<script>
6export default {
7  name: 'ChildComponent',
8  mounted() {
9    console.log('子组件已挂载');
10  }
11}
12</script>

2. 父组件

复制
1<template>
2  <div>
3    <ChildComponent ref="child" />
4  </div>
5</template>
6
7<script>
8import ChildComponent from './ChildComponent.vue';
9
10export default {
11  components: {
12    ChildComponent
13  },
14  mounted() {
15    this.$refs.child.$on('hook:mounted', this.handleChildMounted);
16  },
17  methods: {
18    handleChildMounted() {
19      console.log('通过 ref 获取子组件的挂载');
20    }
21  }
22}
23</script>

方法三：使用 provide 和 inject

通过 provide 和 inject 实现跨层级组件通信。

1. 子组件

复制
1<template>
2  <div>子组件</div>
3</template>
4
5<script>
6export default {
7  name: 'ChildComponent',
8  inject: ['notifyParent'],
9  mounted() {
10    this.notifyParent('mounted');
11  }
12}
13</script>

2. 父组件

复制
1<template>
2  <div>
3    <ChildComponent />
4  </div>
5</template>
6
7<script>
8import ChildComponent from './ChildComponent.vue';
9
10export default {
11  components: {
12    ChildComponent
13  },
14  provide() {
15    return {
16      notifyParent: this.handleNotification
17    }
18  },
19  methods: {
20    handleNotification(hook) {
21      if (hook === 'mounted') {
22        console.log('子组件已挂载');
23      }
24    }
25  }
26}
27</script>