vue3中子组件修改父组件传过来的count，并在父组件中显示

在Vue3中，如果你想要子组件修改父组件传过来的`count`值并让父组件重新渲染显示，你可以通过以下步骤来实现：

1. 在父组件中定义`count`变量，并提供一个方法来更新这个变量。
2. 将`count`变量和更新方法通过props传递给子组件。
3. 在子组件中，通过`defineEmits`定义一个事件，这个事件将会在需要的时候被触发。
4. 当子组件需要修改`count`时，触发在父组件中定义的方法，并传递新的值。

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

父组件代码:

<template>
  <div>
    <p>Count is: {{ count }}</p>
    <ChildComponent :count="count" @update:count="updateCount" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const count = ref(0);

    function updateCount(newCount) {
      count.value = newCount;
    }

    return {
      count,
      updateCount
    };
  }
};
</script>

子组件代码:

<template>
  <button @click="increment">Increment</button>
</template>

<script>
import { defineEmits } from 'vue';

export default {
  props: {
    count: Number
  },
  emits: ['update:count'],
  setup(props, { emit }) {
    const increment = () => {
      // 假设我们要加1
      emit('update:count', props.count + 1);
    };

    return {
      increment
    };
  }
};
</script>

在这个例子中，当用户点击子组件中的按钮时，子组件会触发一个名为`update:count`的事件，并将新的`count`值传递给父组件。父组件监听到这个事件后，会调用`updateCount`方法来更新`count`的值，从而触发父组件的重新渲染。