v-model的父传子 子传父
时间: 2023-10-15 15:29:58 浏览: 41
v-model是一个用于实现父组件向子组件传值和子组件向父组件传值的指令。在父组件中使用v-model时,本质是通过:modelValue属性和@update:modelValue事件进行双向绑定。 例如在父组件中使用v-model="num",实际上等同于使用:modelValue="num"和@update:modelValue="num = $event"。
在子组件中接收父组件传递的值需要使用props属性,并在props中定义一个名为modelValue的属性来接收父组件传递的值。然后在子组件中使用<input type="text" @input="a">来监听输入事件,并通过this.$emit('update:modelValue', e.target.value)将输入的值通过update:modelValue事件传递给父组件进行更新。
如果需要子组件调用父组件的方法来传递数据,可以在子组件中使用$emit触发一个自定义事件,并通过该事件调用父组件的方法来传递值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3 使用v-model父传子并修改传值](https://blog.csdn.net/qq_42611074/article/details/121208133)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue之组件传值---父传子(属性)---子传父(emit,sync,v-model)](https://blog.csdn.net/chuxialia/article/details/126755640)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]