【vue】父子组件数据双向绑定 v-model 和 sync

最新推荐文章于 2025-06-03 09:40:25 发布

涳涳嘚慌

最新推荐文章于 2025-06-03 09:40:25 发布

阅读量326

点赞数

分类专栏：笔记文章标签： vue 前端

原文链接：https://www.jianshu.com/p/92d21533cef6

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

本文详细解析了在不同版本的Vue中，如何在自定义组件内使用v-model进行双向数据绑定。从老版本的手动实现到v2.2.0+引入的model属性，再到v2.3.0+新增的sync修饰符，逐步展示了更灵活、高效的绑定方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

在自定义组件中使用v-model

老版本

<!-- 自定义zInput组件 -->
<template>
    <input type="text" v-model="val" @input="iptInput"/>
</template>

<script>
    export default {
        name: "zInputOne",
        props: {
            value: String  //在props接受父组件传递数据
        },
        data(){
            return {
                val: this.value  // 内部值和value进行关联
            }
        },
        watch: {
            value(val){    // 监听父组件传递数据，更新内部值
                this.val = val 
            }
        },
        methods: {
            iptInput(){
                // 通过$emit触发input事件，将内部值传递给给父组件
                this.$emit('input', this.val)
            }
        }
    }
</script>

v2.2.0+ 新增model属性

<template>
    <input type="text" v-model="val" @input="iptInput"/>
</template>

<script>
    export default {
        name: "zInputTwo",
        model: {  // 定义model
            prop: 'value',  // 绑定prop传递的值
            event: 'input'  // 定义触发事件名称
        },
        props: {
            value: String    // 接受父组件传递的值
        },
        data(){
            return {
                val: this.value    // 关联值
            }
        },
        methods: {
            iptInput(){ 
                // 通过$emit触发input（model内定义）事件，将内部值传递给给父组件
                this.$emit('input', this.val)
            }
        }
    }
</script>

第一种实现方式弊端：只能通过定义value和触发input
第二种实现方式：可以接受任意变量，触发任意自定义事件

sync修饰符（v2.3.0+ 新增）

<template>
    <input type="text" v-model="val" @input="iptInput">
</template>
<script>
    export default {
        name: "syncAndUpdate",
        props: {
            value: String
        },
        data(){
            return {
                val: this.value    // 关联值
            }
        },
        methods: {
            iptInput(){
                // 通过触发update:value 触发事件，将值传给父组件
                this.$emit('update:value', this.val)
            }
        }
    }
</script>
<!-- 使用 -->
<sync-and-update :value.sync="thirdValue"></sync-and-update>