vue3和vue2 v-model 和sync语法糖区别

最新推荐文章于 2025-05-28 11:06:29 发布

小蟹蟹蟹蟹

最新推荐文章于 2025-05-28 11:06:29 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_37683424/article/details/128948787

文章介绍了Vue.jsv3中父子组件通信方式的变化，对比了v2的v-model和sync语法糖。在v3中，子组件使用update事件更新父组件的属性，而父组件需使用v-model指令，尽管VSCode的语法检查可能报错，但不影响运行。同时回顾了v2中的v-model和.sync语法糖的使用方法。

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

1.先直接看下 v3咋写的

1.子组件的写法和v2是一样的
2.update事件后面跟上传递的属性名
3.第二个参数是传的值

<template>
    <div>
        <button @click="$emit('update:num',num+1)">子组件修改:{{num}}</button>
    </div>
</template>

<script>
    export default {
        props:["num"]
    }
</script>

1.父组件使用方式和以前不一样了文末有v2的用法自行对比
2.这必须使用 v-model指令冒号: 跟上属性的名字
3.后面赋值还是一样的
4.需要注意的是这种写法在vscode里面语法检查会报错,这个不用管,因为这块的语法ESlint没有更新,但是不会影响运行的

 <h1>父组件数据: {{num}}</h1>
  <msg-skill v-model:num="num"></msg-skill>

2.接着回顾下`v2`父子组件的2种简洁写法

2.1 v-model

父组件内使用子组件

<btn v-model="num"></btn>

子组件

    Vue.component("btn",{
        props:["value"],
        template:`
            <div>
                <button @click="$emit('input',value+1)">按钮 {{value}}</button>   
            </div>
        `
    })

v-model 相当于
1.父组件绑定input事件
2.value绑定输入框的值

 <btn :value="value " @input="value = $event.target.value "></btn>

3.所以可以通过父组件使用v-model指令代替绑定值和事件
4.子组件直接通过 $emit()触发input事件

2.2 sync语法糖

父组件属性.sync=变量

        <btn2 :num.sync="num" ></btn2>

子组件

   Vue.component("btn2",{
        props:["num"],
        template:`
            <div>
                <button @click="$emit('update:num',num+1)">按钮 {{num}}</button>   
            </div>
        `
    })