v-model 和 .sync 的区别及使用方法

 v-model

 .sync 原理: 和 v-mode 极其类似 , 先了解 v-model

 v-model 双向绑定指令就是一个 语法糖 , 本质上做了两件事情

• 1.  给子组件绑定一个 value 属性, 对应一个变量
• 2.  给子组件绑定一个 input 事件, 在事件处理函数中给变量赋值

父组件

<template>
  <div>

    <!-- v-model 原理 -->
    <son :value="count" @input="val => count = val" />
    
    <!-- v-model 的使用 -->
    <son v-model="count2" />

  </div>
</template>

<script>
import son from './son.vue'

export default {
  components: {
    son
  },
  data() {
    return {
      count: 0,
      count2: 0
    }
  }
}
</script>
复制代码

子组件

<template>
  <div>
    count 值为: {{ value }}
    <el-button size="mini" @click="hClick">点我给 count + 1</el-button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  methods: {
    hClick() {
      // 原理 : 子组件调用父组件函数 ,并传值
      this.$emit('input', this.value + 1)

      // v-model 双向绑定 , 直接修改
      this.count2++
    }
  }
}
</script>
复制代码

.sync

v-model 只能在组件 或 标签上设置 一次 , 如果需要有多个变量双向绑定 , 就无法很好的实现 .

v-model 只能在 表单上双向绑定 , 在父组件和子组件之间对某个属性值进行双向绑定时, 就要用 .sync修饰符实现.

父组件

<template>
  <div>
   
    <!-- .sync原理 实现双向绑定 -->
    <sonSync :count="count" @update:count="val => count = val" />

    <!-- .sync  实现双向绑定 -->
    <sonSync :count.sync="count2" />

  </div>
</template>

<script>
import sonSync from './sonSync.vue'
export default {
  components: {
    sonSync
  },
  data() {
    return {
      count: 0,
      count2: 0
    }
  }
}
</script>

复制代码

子组件

<template>
  <div>
    count 值为: {{ count }}
    <el-button size="mini" @click="hClick">点我给 count + 1</el-button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  methods: {
    hClick() {
      // .sync原理 实现双向绑定
      this.$emit('update:count', this.count + 1)

      // .sync  实现双向绑定
      this.count2++
    }
  }
}
</script>
复制代码

v-model 和 .sync 的 区别

1. v-model 在标签上只能绑定 1 个 , 表单上只能使用 v-model.

2. v-model 用的事件名 input, 属性名是 value , .sync 用的事件名 update:属性名, 属性名自定义.