Vue 父组件点击事件触发子组件生命周期

在 Vue 中，子组件的生命周期是在父组件中引用子组件时就开始触发的，并不受父组件点击事件的影响。父组件的点击事件只是触发了子组件的某个方法或改变了子组件的某个属性，而不会影响子组件的生命周期。

如果你想在父组件的点击事件中触发子组件的某个生命周期钩子函数，你可以将子组件的生命周期钩子函数作为方法传递给子组件，并在父组件的点击事件中调用该方法。

例如，父组件的模板如下：

<template>
  <div>
    <button @click='handleButtonClick'>点击触发子组件生命周期</button>
    <ChildComponent :childLifecycle='handleChildLifecycle' />
  </div>
</template>

父组件的方法中定义点击事件的方法和子组件生命周期触发的方法：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // 点击事件触发子组件的生命周期
      this.handleChildLifecycle();
    },
    handleChildLifecycle() {
      // 子组件的生命周期触发的方法
      console.log('触发子组件的生命周期');
    }
  }
}
</script>

子组件的模板如下：

<template>
  <div>
    子组件
  </div>
</template>

子组件的props中接收父组件传递的方法并调用：

<script>
export default {
  props: {
    childLifecycle: {
      type: Function,
      required: true
    }
  },
  mounted() {
    this.childLifecycle();
  }
}
</script>

这样，当父组件中的按钮被点击时，会触发子组件的生命周期钩子函数，并输出相应的消息。