vue中v-model和.sync的差异和用法

vue中v-model和.sync的差异和用法

• 二者相同点

  • 都是语法糖，都可以实现父子组件中的数据的双向通信

• 不同点:

  • 书写格式不同 v-model="sum", :num.sync="sum"
  • 绑定个数不同 v-model一个组件或输入框只能绑定一个 .sync可以有多个
  • v-model 是@input + value的语法糖
  • .sync 是@update:sum 的语法糖

• v-model用法

// 父组件
<template>
    <div>
        <Vmodel v-model="checkValue"></Vmodel>
        父组件：{{checkValue}}
        <div>----------------------------</div>
         <Sync :syncValue.sync="syncValue"></Sync>
         父组件：{{syncValue}}
    </div>
</template>

<script>
import Vmodel from "./Vmodel"
import Sync from "./Sync"
export default {
    data(){
        return {
            checkValue:2222,
            syncValue:33,
        }
    },
    components:{
        Vmodel,
        Sync
    }
}
</script>

// 子组件：Vmodel
<template>
  <div>
      <button @click="handleClick">点击</button>
      <!-- 不能直接修改父组件的数据，需要定义一个新的变量代替 -->
      <!-- <input type="text" v-model="handleClick"> -->
      Vmodel: {{checkValue}}
  </div>
</template>

<script>
export default {
  props: {
    checkValue: {
      type: Number,
      default: 8
    }
  },
  model: {
    prop: "checkValue",
    event: "update"
  },
  methods:{
      handleClick(){
          this.$emit('update',this.checkValue+1)
      }
  }
};
</script>

.sync 用法

// 父组件
<template>
    <div>
        <Vmodel v-model="checkValue"></Vmodel>
        父组件：{{checkValue}}
        <div>----------------------------</div>
         <Sync :syncValue.sync="syncValue"></Sync>
         父组件：{{syncValue}}
    </div>
</template>

<script>
import Vmodel from "./Vmodel"
import Sync from "./Sync"
export default {
    data(){
        return {
            checkValue:2222,
            syncValue:33,
        }
    },
    components:{
        Vmodel,
        Sync
    }
}
</script>

// 子组件：Sync
<template>
  <div>
      <button @click="handleClick">点击</button>
      <!-- 不能直接修改父组件的数据，需要定义一个新的变量代替 -->
      Vmodel: {{syncValue}}
  </div>
</template>

<script>
export default {
  props: {
    syncValue: {
      type: Number,
      // default: 8
    }
  },

  computed:{
    value(){
      return
    }
  },

  methods:{
      handleClick(){
          this.$emit('update:syncValue',this.syncValue+1)
      }
  }
};
</script>