v-model 维护组件内外数据双向同步

父组件在使用子组件期间，可以使用 v-model 指令 维护组件内外数据的双向同步。

>> 在 vue2.x 中，子组件和父组件同步数据时，通常会使用下面这种方式

• 父组件向子组件传值

子组件定义 props 属性，父组件使用 v-bind 绑定该属性

// 父组件
<count :num="count"></count>
  
data() {
  return {
    count: 0
  }
}

// 子组件
props: ['num']

• 父组件向子组件传值

子组件定义自定义事件，利用 $emit 触发事件并传值，父组件监听自定义事件。

如下面这个例子，如果 add() 函数被调用，num 值自增，则要引起父组件 count 值对应改变。这时就需要调用 $emit() 触发自定义事件，将更新的值传递给父组件；

export default {
  props: ['num'],
  methods: {
    add() {
      this.$emit('numchange', this.num + 1)
    }
  }
}

同时，在父组件中设定负责监听自定义事件的函数，接收子组件传递来的值并作出对应改变。

// 父组件
<count :num="count" @numchange="getNum"></count>

data() {
  return {
    count: 0
  }
},
methods: {
  getNum(num) {
    this.count = num
  }
},

>> 在 vue3.x 中，子组件和父组件同步数据时，则可以利用 v-model 来进行简化，无需再在父组件中设定监听自定义事件的函数即可同步数据

具体而言，在父组件中，需要在 v-bind 指令前添加 v-model 指令。而在子组件中，需要声明 emit 自定义事件，格式要求为： update: xxx。子组件调用 $emit() 触发自定义事件，则新值就会被更新到父组件所绑定的值中（如此处的 count）。

// 父组件
<count v-model:num="count"></count>

data() {
  return {
    count: 0
  }
}

// 子组件
export default {
  props: ['num'],
  emits: ['update:num'],
  methods: {
    add() {
      this.$emit('update:num', this.num + 1)
    }
  }
}

需注意：相比于 vue 2.x ，在自定义事件时 vue 3.x 提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。参考 >> 官方说明

通过了解 vue2 和 vue3 同步子组件和父组件数据的方法，即可实现下面效果：