vue3中关于v-modal和:value两种模式的问题 最后更新时间：2024年12月27日 #### Vue3 子组件修改父组件传过来的值 1、在父组件中，找到引用的子组件，在引用中加入v-model 例如：子组件是demo,需要穿的值为num 这个有个温馨提示，（v-model +冒号+需要穿的值）这个v-model可以写多个 ```html <demo v-model:num="num"></demo> //例如 可以写多个 需要修改多个传入的值 <demo v-model:num="num" v-model:arr="arr"></demo> ``` 2、在子组件中引用 注意：在vue3中 defineProps 需要引用一下 ```javascript import { defineProps } from 'vue' const prop=defineProps({ num: { type: Number, default:0 } }) ``` 3、定义一个emit来修改这个值 defineEmits也需要引入一下，一定要加update,冒号后面就是传过来的值的那个字段 ```javascript const emit= defineEmits(['update:num']) ``` 4、使用方法 直接在你需要的事件里，比如：click修改 ```javascript 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流向页面。
Comments | NOTHING