.sync使用 - 技术栈

.sync使用

阿奇__2026-01-30 14:52

1..sync的常规用法

父组件中：

javascript 复制代码

<!-- 父组件 -->
<custom-dialog :visible.sync="dialogVisible">
  内容区域
</custom-dialog>

这行代码实际上会被 Vue 编译为：

javascript 复制代码

<custom-dialog 
  :visible="dialogVisible"
  @update:visible="val => dialogVisible = val"
>

子组件中：

javascript 复制代码

<script>
export default {
  props: ['visible'],
  methods: {
    close() {
      // 子组件通过触发特定事件来更新父组件数据
      this.$emit('update:visible', false)
    }
  }
}
</script>

2.封装多层组件时,需要拆解.sync,否则打开一次后报错就无法打开第二次

javascript 复制代码

<!-- 中间层组件 -->
<template>
  <div class="wrapper">
    <!-- 1. 显式绑定 prop -->
    <!-- 2. 显式监听事件并向上转发 -->
    <custom-dialog 
      :visible="visible"
      @update:visible="val => $emit('update:visible', val)"
    >
      <slot></slot>
    </custom-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 必须显式声明接收父组件传来的 visible
    visible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

或简写形式

javascript 复制代码

<custom-dialog 
  :visible="visible"
  @update:visible="$emit('update:visible', $event)"
>