vue3中子组件向父组件传递数据（实现加减的实例）

在Vue 3中，子组件向父组件传递数据通常通过props（属性）的方式进行。假设我们有一个简单的场景，创建一个计数器组件，它可以增加或减少数字，并将这个值传递给父组件。下面是一个简单的例子：

**计数器子组件（Counter.vue）**:

<template>
  <div>
    <button @click="increment">+</button>
    <span>{{ count }}</span>
    <button @click="decrement">-</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0); // 存储当前的计数值

function increment() {
  count.value++;
}

function decrement() {
  count.value--;
}
</script>

**父组件（Parent.vue）**:

<template>
  <div>
    <!-- 使用v-bind绑定子组件传来的count值 -->
    <child-component :count="parentCount" @update="handleUpdate"></child-component>
    <p>Parent Count: {{ parentCount }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentCount: 0, // 父组件初始计数
    };
  },
  methods: {
    handleUpdate(newCount) {
      this.parentCount = newCount;
    },
  },
};
</script>

在这个例子中，`counter`组件通过`props`接收`count`值，并通过`@emit`事件（`@update`）更新它，当用户点击加减按钮时。父组件则监听这个事件并更新显示的值。