vue 子组件调用父组件

在 Vue 中，子组件可以通过事件来调用父组件。具体的做法是：

1. 在父组件中定义一个方法，作为子组件调用时的响应。例如，我们在父组件中定义一个名为 `handleChildClick` 的方法。

2. 在子组件中，通过 `$emit` 方法触发一个自定义事件，并传递需要传递给父组件的数据作为参数。例如，当子组件中的某个按钮被点击时，我们可以通过 `$emit('child-click', data)` 触发一个名为 `child-click` 的事件，并传递数据 `data`。

3. 在父组件中使用子组件时，可以通过在子组件上绑定事件监听器来响应子组件触发的事件。例如，可以在父组件模板中使用 `<child-component @child-click="handleChildClick"></child-component>` 来监听子组件触发的 `child-click` 事件，并调用 `handleChildClick` 方法进行处理。

以下是一个简单的示例代码：

<template>
  <div>
    <button @click="handleChildClick">点击子组件按钮</button>
    <child-component @child-click="handleChildClick"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChildClick(data) {
      console.log('子组件点击事件触发', data);
      // 父组件对子组件触发的事件进行处理
    },
  },
};
</script>

在子组件 `ChildComponent` 中，可以使用 `$emit` 方法触发 `child-click` 事件：

<template>
  <div>
    <button @click="emitChildClick">点击触发父组件事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitChildClick() {
      const data = '子组件传递给父组件的数据';
      this.$emit('child-click', data);
    },
  },
};
</script>

这样，当子组件中的按钮被点击时，父组件的 `handleChildClick` 方法将被调用，并且传递的数据会作为参数传递给该方法。