vue3 defineProps子组件修改父组件的值

在Vue3中，子组件不能直接修改通过props传递的父组件的值，这是因为props本质上是单向数据流，只能由父组件传递给子组件。如果需要修改父组件的值，可以通过在子组件中触发$emit来向上传递一个事件，然后在父组件中监听这个事件并修改相应的值。

具体操作步骤如下：

1. 在子组件中使用defineProps定义props属性

import { defineProps } from 'vue';

export default {
  props: defineProps({
    count: Number
  }),
  methods: {
    handleClick() {
      this.$emit('update:count', this.count + 1);
    }
  }
}

2. 在父组件中引入子组件并绑定count属性和监听update:count事件

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

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

export default {
  components: { ChildComponent },
  data() {
    return {
      count: 0
    }
  }
}
</script>

这样子组件就可以通过点击按钮来触发update:count事件并向上传递一个新的值来修改父组件的count值了。