vue3子组件使用计算属性修改父组件传过来的props数据

在Vue3中，子组件可以使用 `defineProps` 来声明props，同时可以使用 `defineEmits` 来声明事件，通过事件来修改父组件的数据。

在子组件中，你可以使用 `watch` 监听props的变化，然后通过 `$emit` 触发自定义事件将修改后的数据传递给父组件。

具体步骤如下：

1. 在子组件中使用 `defineProps` 声明需要接收的prop，例如：

   import { defineProps } from 'vue';
   
   export default {
     props: defineProps({
       count: Number
     })
   }

2. 在子组件中使用 `watch` 监听props的变化，例如：

   import { watch } from 'vue';
   
   export default {
     props: defineProps({
       count: Number
     }),
     setup(props) {
       watch(() => props.count, (newValue, oldValue) => {
         // 根据需要修改props数据
         props.count = newValue + 1;
         // 触发自定义事件将修改后的数据传递给父组件
         emit('update:count', props.count);
       });
     }
   }

3. 在父组件中使用子组件时，传递需要修改的props数据和自定义事件，例如：

   <template>
     <div>
       <child-component :count="count" @update:count="count = $event"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         count: 0
       }
     }
   }
   </script>

上述代码中，父组件将 `count` 作为props传递给子组件，并监听子组件触发的 `update:count` 事件，将传递的数据赋值给 `count`。当子组件监听到 `count` 发生变化时，会触发 `update:count` 事件将修改后的数据传递给父组件。这样就实现了子组件通过自定义事件修改父组件传过来的props数据的功能。