详解vue修饰符 sync ，结合案例

最新推荐文章于 2025-07-02 10:36:52 发布

kaiking_g

最新推荐文章于 2025-07-02 10:36:52 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/u013299635/article/details/108378300

vue 专栏收录该内容

29 篇文章

订阅专栏

本文详细解析了Vue.js中.sync修饰符的功能与用法，通过实例展示了如何利用.sync修饰符实现子组件向父组件的数据同步更新。深入探讨了其背后的编译原理及实际应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，前言

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定

.sync 修饰符，只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

// 你的代码
<comp :foo.sync="bar"></comp>

// 编辑后的代码
<comp :foo="bar" @update:foo="val => bar = val"></comp>

所以在子组件中，需要更新父组件的数据时，使用

this.$emit('update:XXX',XXX)
// update：是被固定的也就是vue为我们约定好的名称部分

二，案例

父组件源码

// 父组件源码
<template>
  <div class="app-container">
    <Test :parent-obj.sync="parentObj" />
  </div>
</template>

<script>
export default {
  components: {
    Test: () => import('./components/Test')
  },
  data () {
    return {
      parentObj: {
        value: 'init'
      }
    }
  },
  watch: {
    parentObj: {
      handler (obj) {
        var val = obj.value
        debugger
      },
      // immediate: true,
      deep: true
    }
  }
}
</script>

子组件源码

// 子组件源码
<template>
  <input v-model="childObj.value" type="text" class="input-cls">
</template>

<script>
export default {
  props: {
    parentObj: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      childObj: {
        value: ''
      }
    }
  },
  watch: {
    childObj: {
      handler (obj) {
        var val = obj.value
        debugger
        // update：是被固定的也就是vue为我们约定好的名称部分
        this.$emit('update:parentObj', obj)
      },
      // immediate: true,
      deep: true
    },
    parentObj: {
      handler (obj) {
        var val = obj.value
        // this.childObj = this.$common.deepCloneObj(obj)
        this.childObj = obj
        debugger
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.input-cls {
  padding: 4px 8px;
  border: 1px solid #ddd;
}
</style>