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

最新推荐文章于 2023-10-27 07:57:20 发布

落梅抚雪

最新推荐文章于 2023-10-27 07:57:20 发布

阅读量357

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43825389/article/details/123007950

版权

本文详细介绍了 Vue 中的 v-model 和 .sync 修饰符的区别与使用方法。v-model 作为双向数据绑定的语法糖，适用于单个组件或输入框，而 .sync 修饰符则允许一个组件触发多个更新事件。通过实例展示了如何在父子组件间使用这两个特性进行数据通信。

摘要由CSDN通过智能技术生成

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>