Vue3子组件怎么既能接收父组件的参数,又能自己改变这个值?

我的需求是在第一次渲染时从父组件接收传过来的值,后续想自己改变这个值。但现在我在子组件defineProps中收到参数,却没办法改变了。请问该怎么解决啊?

  <a-input-number
                id="inputNumber"
                v-model:value="num"
                :min="1"
              />
let check = defineProps({
  nums: {
    type: Number,
    default: 0
  },)

const num = ref<number>(check.nums)

如代码所示,我想改变的是num的值,像数据库发送请求更新,父组件的值也是从数据库来的,自然会自动更新。如果通过emits向父组件传值,更新数据库会很麻烦。不知道可行不可行。
父组件是这样的

 <div id="mydata" v-for="arr in cdata">
      <CCard
        :id="arr.id"
        :nums="arr.num"
        ……
      ></CCard>
    </div>

在 Vue3 中,子组件可以通过 props 接收来自父组件的参数,同时也可以通过 emit 方法向父组件发送事件来改变这个参数的值。

收到后赋值给子组件自己的变量进行修改

演示一下:


<!-- 父组件 -->
<template>
  <div>
    <h2>{{ message }}</h2>
    <child-component :count="count" @update-count="updateCount" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0,
    };
  },
  methods: {
    updateCount(value) {
      this.count = value;
    },
  },
};
</script>


<!-- 子组件 -->
<template>
  <div>
    <h3>Count: {{ count }}</h3>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    incrementCount() {
      const newCount = this.count + 1;
      this.$emit('update-count', newCount);
    },
  },
};
</script>



父组件传过去之后watch监听一下,不监听的话可能不会实时更新