v-model与sync区别

v-model双向绑定传值

1.v-model原理:绑定value属性,监听input事件

// 父组件
<template>
    <div>
        <h2>父组件的值{{num}}</h2>
       <Child v-model="num"></Child> 
       <!-- v-model等价于以下写法 -->
       <!-- <Child :value="num" @input='val=>num=val'></Child> -->
    </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  data() {
    return {
      num: 10,
    };
  },
  components: {
    Child,
  },
};
</script>

//子组件
<template>
  <div>
      <h3>子组件接收的值{{value}}</h3>
      <button @click='change'>点击修改</button>
  </div>
</template>
<script>
export default {
     props:{
            value:{ // 这里的值的名字一定要叫value 因为v-modle双向绑定的就是value属性
                type:Number,
                required:true,
            }
        },
        methods: {
            change(){
                // $emit触发input事件修改接收的值 父组件中跟着变化
                this.$emit('input',this.value+1)
            }
        }
}
</script>

2.点击子组件按钮修改接收的值 父子组件同时变化:this.$emit('input',this.value+1)

\

sync使用

//父组件
<template>
    <div>
        <h2>父组件的值num-->{{num}}---num1-->{{num1}}</h2>
       <Child :a.sync="num " :b.sync='num1'></Child> 
    </div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
  data() {
    return {
      num: 10,
      num1:20
    };
  },
  components: {
    Child,
  },
};
</script>

//子组件
<template>
  <div>
      <h3>子组件接收的值a:{{a}}</h3>
      <h3>子组件接收的值b:{{b}}</h3>
      <button @click='change'>点击修改</button>
  </div>
</template>
<script>
export default {
     props:{
            a:{
                type:Number,
                required:true,
            },
            b:{
                type:Number,
                required:true,
            }
        },
        methods: {
            change(){
                // $emit触发update事件修改接收的值 父组件中跟着变化
                this.$emit('update:a',this.a+1)
                this.$emit('update:b',this.b+1)
            }
        }
}
</script>

\

小结

💡 v-model和sync都是属于语法糖，v-model只能绑定单个，sync可绑定多个

格式不同：

• v-model="num", :num.sync="num"
• v-model： @input + value
• :num.sync: @update:num