vue父组件监听子组件事件触发

在Vue中，父组件可以通过监听子组件的事件来获取子组件的状态或者触发一些操作。具体实现方法如下：

1.在子组件中定义一个事件，并在需要触发该事件的地方使用`$emit`方法触发该事件，例如：

// 子组件中定义事件
this.$emit('child-event', 'hello from child component')

2.在父组件中使用`v-on`指令监听子组件的事件，并在回调函数中处理事件，例如：

<!-- 父组件中监听子组件事件 -->
<child-component v-on:child-event="handleChildEvent"></child-component>

// 父组件中处理子组件事件
methods: {
  handleChildEvent(data) {
    console.log(data) // 输出：'hello from child component'
  }
}

另外，在Vue 2中，还可以使用`@hook`事件来监听子组件的生命周期事件，例如：

<!-- 父组件中监听子组件生命周期事件 -->
<child-component v-on:hook:mounted="handleMounted"></child-component>

// 父组件中处理子组件生命周期事件
methods: {
  handleMounted() {
    console.log('child component mounted')
  }
}

在Vue 3中，可以使用类似上面的`@hook`事件来监听子组件的生命周期事件，例如：

<!-- 父组件中监听子组件生命周期事件 -->
<child-component v-on:hook:mounted="handleMounted"></child-component>

// 父组件中处理子组件生命周期事件
methods: {
  handleMounted() {
    console.log('child component mounted')
  }
}