前言

Vue的v-model指令和.sync修饰符都可以做到父子组件之间数据的双向绑定，那么它们都是如何实现的呢？又有什么区别呢？下面通过父子组件间相互传值来给大家讲解。

tips: 父组件--->子组件：自定义属性 子组件--->父组件：自定义事件

---

一、v-model指令

Vue源码中v-model指令实现步骤很复杂，这里给大家举个例子，可以很快明白其中的原理。v-model可以用在输入框、下拉框等的双向绑定上，那么当在输入框上使用v-model时，这个指令绑定的是输入框的固有属性——value，通过input事件，就可以监听到输入框的输入事件，从而达到双向绑定的效果。

1.代码演示

代码如下（示例）： 找一个vue项目中，在src/components文件夹下新建Com.vue文件，然后在App.vue中注册为子组件。

Com.vue

<template>
  <div>
    {{ 'count的值是:' + value }}
    <!--通过一个input的自定义事件来修改父组件中的count-->
    <button @click="$emit('input', value - 1)">-1</button>
  </div>
</template>

<script>
export default {
  // 通过自定义属性拿到父组件中的count值
  props: {
    value: {
      type: Number,
      required: true
    }
  }
}
</script>

App.vue

<template>
  <div>
    <Com v-model="count"></Com>
    <!--v-model指令就相当于-->
    <!--将子组件需要的count数值传递过去，监听自定义事件来修改count的数值-->
    <!--<Com :value = "count" @input = "val => count = val"></Com>-->
  </div>
</template>

<script>
import Com '@/components/Com.vue'
export default {
  name: 'App',
  data() {
    return {
      count: 50
    }
  },
  components: {
    Com
  }
}
</script>

<style></style>

2.结果展示

当点击-1的按钮后，可以点开vue调试工具，查看视图与vue中的数据是否保持一致。

二、.sync修饰符

.sync修饰符的实现模式和v-model指令很相似，如果你懂得了v-model的实现原理，那么相信这个你也可以很快掌握。

1.代码演示

代码如下（示例）： 在src/components目录下新建一个Comm.vue组件，并在App.vue组件中注册为子组件。

Comm.vue

<template>
  <div>
    <p>{{ 'a的值是:' + a }}</p>
    <!--通过自定义事件修改父组件中的num-->
    <button @click="$emit('update:a', a + 1)">+1</button>
    <p>------------------</p>
    <p>{{ 'b的值是：' + b }}</p>
    <button @click="$emit('update:b', b - 1)">-1</button>
  </div>
</template>

<script>
export default {
  props: {
    a: {
      type: Number,
      required: true
    },
    b: {
      type: Number,
      required: true
    }
  }
}
</script>

App.vue

<template>
  <div>
    <Comm :a.sync="num" :b.sync="count"></Comm> 
    <!--相当于父组件将num值通过自定义属性传递给了子组件-->
    <!--子组件要修改num值，通过自定义的update事件来修改-->
    <!--<Comm :a="num" @update:a="val => num = val" :b="count" @update:b="val => count = val"></Comm>-->
  </div>
</template>

<script>
import Comm from '@/components/Comm.vue'
export default {
  name: 'App',
  data() {
    return {
      num: 100,
      count: 50
    }
  },
  components: {
    Comm
  }
}
</script>

<style></style>

2.结果展示

同样的还是观察两个数值是否同时发生变化。

三、区别

想必大家看完两个示例代码后，就大概知道区别了。

• 绑定次数 v-model只能通过value值来作为自定义属性来给子组件传值，一个组件也只能使用一次v-model指令。 .sync修饰符，可以自定义自定义属性的名字，所以可以父子传值使用.sync修饰符可以双向绑定多次。

---

总结

今天就给大家分享到这里，有什么疑问，欢迎各位小伙伴评论区一起讨论，Fighting~