Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定

最新推荐文章于 2025-06-30 12:25:16 发布

爪哇犀牛

最新推荐文章于 2025-06-30 12:25:16 发布

阅读量1.5w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： model .sync

本文链接：https://blog.youkuaiyun.com/Qin_Shuo/article/details/82693919

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了Vue.js中v-model与.sync指令的工作原理及差异，解析了它们如何实现双向数据绑定与传递，以及在自定义组件中的应用。

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

前面的话

虽然v-model和.sync之间的区别，是非常明显的，但是通过这个去研究下去，就有点意思了。首先说明v-model是.sync的一种特殊情况，也就是当prop是value，vm.$emit('update:input')，这个时候就是传统意义上的v-model，也就是说v-model是model为prop等于value，event为input的特殊情况。

概念

双向数据传递

为了和绑定区分我把他称为传递，也就是父子组件之间的传递

双向数据绑定

和双向数据绑定不同，双向数据绑定则是数据驱动dom，dom反作用于数据，vue通过Object.defineProperty()，实现了数据驱动dom，而通过dom驱动数据很容易实现了，举个例子当<input>，发生变化的时候把变化后的值赋给一个当前页面的局部变量，周而复始的实现双向的数据绑定

v-modle

引用官网上的一句话：通过使用自定义事件可以在自定义的组件中创建v-modle（注意Input中I大写，是因为这个是自定义的一个包装input标签的组件）

<Input v-model="searchText">

等价于，也就是说当使用v-model的时候默认会调用父级组件中的一个用input触发的事件，这个事件就是为了给当前的prop进行重新赋值。

<Input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

如果想顺利的使用v-model还需要对组件进行以下的处理

Vue.component('Input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

详情

双向数据传递

概念：父子组件之间可以相互修改数据

应用：弹窗、表单

实现：v-model，.sync，model

我们先从概念入手，什么是相互修改，我们都知道的是，父子沟通用的是props，子父沟通用的是$emit，那双向传递就显而易见了，就是在父组件使用props传值给子组件，子组件再通过$emit可以调整父组件。

三种实现的差异

v-modle是最特殊的一个，他其实是model和.sync的特殊情况，有代码为证

model

<style>
  input.i911-model-input {
    color: #f747ff;
    border-radius: 4px;
    border: 3px solid #fa4dde;
  }
</style>

<template>
  <div>
    <input
      class="i911-model-input"
      :value="modelInput"
      @click="handleInput"
    />
  </div>
</template>

<script>
  export default {
    name: "ModelInput",
    model:{
      prop:'modelInput',//为了和v-model默认的value区分，将prop改为自定义的名称
      event:'click'//为了和v-model默认的input区分，将event改为click
    },
    props: {
      modelInput: {
        type: String,
        default: 'modelInput'
      }
    },
    methods:{
      handleInput(event){
        this.$emit('click',event.target.value)//自定义组件中使用v-model都需要通过$emit触发
      }
    }
  }
</script>

sync

<style>
  input.i911-sync{
    color: #801a27;
    border-radius: 4px;
    border: 3px solid #ff375a;
  }
</style>
<template>
  <main>
    <input class="i911-sync"
           :value="msg"
           @input="handleInput"
    >
  </main>
</template>

<script>
  export default {
    name: "SyncInput",
    props: {
      msg: {
        type: String,
        default: ''
      }
    },
    methods:{
      handleInput(event){
        this.$emit('update:msg',event.target.value)
      }
    }
  }
</script>

v-model

<style>
  input.i911-v-model{
    color:green;
    border-radius: 4px;
    border: 3px solid #36ff7a;
  }
</style>
<template>
  <main>
    <input class="i911-v-model"
      :value="value"
      @input="handleInput"
    >
  </main>
</template>

<script>
  export default {
    name: "VModel",
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    methods:{
      handleInput(event){
        this.$emit('input',event.target.value)//这里$emit调用的是默认的input
      }
    }
  }
</script>

子组件贴完了该我们的父组件了

<style>
input.temp-normal-input{
  color: #1ab0ff;
  border: 3px solid #faf847;
}
  input{
    float: left;
  }
</style>

<template>
  <div>
    TEMP
    //直接通过v-model绑定，通过input触发
    V-MODEL-INPUT:<VMolde v-model="value"></VMolde>
    //这里使用了默认input标签的v-model,因此不需要绑定@input='handleInput',便可以对value修改
    V-MODEL-INPUT-PARENT:<input v-model="value">

    //通过:msg.sync绑定,它实质上是@update:msg='val=>valueSync=val',的语法糖，因此可不用绑定
    SYNC-INPUT:<SyncInput :msg.sync="valueSync"></SyncInput>
    SYNC-INPUT-PARENT:<input v-model="valueSync"><br>

    //直接通过v-model绑定，通过input触发
    NORMAL-INPUT-1:<input class="temp-normal-input" v-model="normalValue"/><br>
    NORMAL-INPUT-2:<input v-model="normalValue"/><br>

    MODEL-INPUT:<model-input v-model="modelValue"></model-input>
    MODEL-INPUT-parent:<input v-model="modelValue"/>
  </div>
</template>

<script>
  import VMolde from '@/components/VMolde'
  import SyncInput from '@/components/SyncInput'
  import ModelInput from '@/components/ModelInput'

  export default {
    name: "temp",
    data() {
      return {
        value:'value',
        valueSync:'valueSync',
        normalValue:'normalValue',
        modelValue:'modelValue'
      }
    },
    methods: {
      handleSyncInput(event){
        this.valueSync=event.target.value;
      }
    },
    components: {
      VMolde,
      SyncInput,
      ModelInput
    }
  }
</script>