使用vue3 组合式组件api emit触发父组件方法 举例

在Vue 3中，你可以使用组合式API来创建和管理组件逻辑。下面是一个使用`setup()`函数和`emit`方法触发父组件方法的示例。

```html
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent(payload) {
      console.log('Event triggered from child:', payload);
    },
  },
};
</script>
```

在这个例子中，父组件`ParentComponent.vue`引入了子组件`ChildComponent.vue`并监听了一个自定义事件`custom-event`。当这个事件被触发时，`handleCustomEvent`方法将被调用。

```html
<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>Child Component</h2>
    <button @click="emitCustomEvent">Trigger Custom Event</button>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup(_, { emit }) {
    const count = ref(0);

    function emitCustomEvent() {
      count.value++;
      emit('custom-event', count.value);
    }

    return {
      emitCustomEvent,
    };
  },
});
</script>
```

在子组件`ChildComponent.vue`中，我们使用了组合式API的`setup()`函数。我们在这里定义了一个响应式引用`count`以及一个方法`emitCustomEvent`。当用户点击按钮时，`emitCustomEvent`方法将被调用，它会更新`count`的值并通过`emit`方法触发`custom-event`事件，同时传递`count.value`作为有效载荷。这将导致父组件的`handleCustomEvent`方法被调用，有效载荷将被打印到控制台。

这个示例展示了如何使用Vue 3的组合式API和`emit`方法在子组件中触发父组件的方法。
更新时间:2024-12-18 20:26