Vue3从入门到实战：深度掌握组件通信（下部曲）

<template>
  <div>
    <h2>{{ title }}</h2>
    <p v-if="description">{{ description }}</p>
    <button @click="incrementCounter">点击数: {{ counter }}</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  props: {
    title: String,
    description: String
  },
  setup(props, { emit }) {
    const counter = ref(0);
 
    function incrementCounter() {
      counter.value++;
      emit('update:counter', counter.value);
    }
 
    return { counter, incrementCounter };
  }
};
</script>

这个代码示例展示了如何在Vue 3组件中使用setup函数和ref来创建响应式数据，并且定义了一个方法来增加这个数据的值。同时，它演示了如何通过emit方法将自定义事件发送到父组件。这个例子简单且直接地展示了Vue 3中组件通信的一种常见模式。