子组件调用父组件方法 emit

在Vue.js框架中，当子组件需要向其父组件传递数据或者请求特定操作时，通常会通过`v-on:emit`指令或者自定义事件`@eventName`来触发一个从子组件到父组件的方法。`emit`是一个内置的API，它允许你在子组件内部调用一个自定义事件并携带一些数据。

例如，假设有一个`ChildComponent`想要通知`ParentComponent`更新状态：

<!-- 子组件 ChildComponent -->
<template>
  <button @click="updateData">点击更新</button>
</template>

<script>
export default {
  methods: {
    updateData() {
      this.$emit('parentUpdate', '新的数据'); // 触发事件并传数据
    }
  }
}
</script>

然后，在`ParentComponent`里接收这个事件：

<!-- 父组件 ParentComponent -->
<template>
  <ChildComponent @parentUpdate="handleParentUpdate"></ChildComponent>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleParentUpdate(data) {
      console.log('接收到的数据:', data);
      // 这里可以对数据做进一步处理
    }
  }
}
</script>

在这个例子中，`updateData`方法触发了名为`parentUpdate`的事件，并将数据发送给父组件的`handleParentUpdate`方法。