vue3 使用v-model父传子并修改传值

永远不会太晚

已于 2022-02-22 11:08:09 修改

阅读量2.3k

点赞数 1

文章标签： vue.js 前端 javascript

于 2021-11-08 15:13:50 首次发布

本文链接：https://blog.csdn.net/qq_42611074/article/details/121208133

版权

本文详细介绍了Vue3中v-model的使用，揭示了它是`:modelValue`和`@update:modelValue`的语法糖。通过示例展示了如何在父组件中通过v-model双向绑定值到子组件，以及子组件如何通过props接收并更新父组件传递的值，通过$emit触发`update:modelValue`事件。理解这一变化对于Vue开发者至关重要。

摘要由CSDN通过智能技术生成

vue3使用v-model替代vue2的v-bind.sync

父使用v-model传值给子，这里的v-model本质上是:modelValue=“值”，@update:modelValue="值 = $event"这二者的缩写

<template>
   <div>
	双向绑定{{num}}
	<child v-model="num"></child>
	// 上方代码是下方的简写
    <child :modelValue="num" @update:modelValue="num = $event"></child>
   </div>
</template>
<script>
import child from './test.vue'
export default {
    components: { child },
    data () {
        return {
            num: 0
        }
    }
}
 </script>

所以子中通过在props中接收modelValue再$emit(‘update:modelValue’) 来修改父传来的值

<template>
    <div>
        <input type="text" @input="a">
    </div>
</template>

<script>
export default {
    props: ["modelValue"],
    methods: {
        a (e) {
            this.$emit('update:modelValue', e.target.value)
        }
    }
}
</script>