Vue3 子组件修改父组件传过来的值

1、在父组件中，找到引用的子组件，在引用中加入v-model
例如：子组件是demo,需要穿的值为num
这个有个温馨提示，（v-model +冒号+需要穿的值）这个v-model可以写多个

<demo v-model:num="num"></demo>
//例如 可以写多个  需要修改多个传入的值
<demo v-model:num="num" v-model:arr="arr"></demo>

2、在子组件中引用
注意：在vue3中 defineProps 需要引用一下

import { defineProps } from 'vue'
const prop=defineProps({
    num: {
        type: Number,
        default:0
    }
})

3、定义一个emit来修改这个值
defineEmits也需要引入一下，一定要加update,冒号后面就是传过来的值的那个字段

const emit= defineEmits(['update:num'])

4、使用方法
直接在你需要的事件里，比如：click修改

const click=()=>{
   emit('update:num',123) //123  代表是将num值修改为123
}

v-model及:value及v-bind

• v-model
  v-model 是 v-model:value 的缩写，通常用于表单上的双向数据绑定（表单接受值 value，故v-model默认收集的就是 value ，所以缩写直接省略 value），可以实现子组件到父组件的双向数据动态绑定。数据不仅能从data流向页面，还可以从页面流向data。
• :value
  :model 是 v-bind:model 的缩写，可以实现将父组件的值传递给子组件，但是子组件不能传给父组件，无法双向绑定。
• v-bind
  v-bind:value 可以简写为 :value ，数据只能从data流向页面。