2023-02-07 vue中的高级修饰符sync超级语法糖背后的核心代码

文章目录

• • • • 介绍
      • 出现背景
      • sync的一个使用场景
      • sync可以让v-model跨组件传值

介绍

出现背景

sync的一个使用场景

element-ui 的dialog对话框示例代码中:https://element.eleme.cn/#/zh-CN/component/dialog

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
           

可以看到sync作为一个修饰符使用

sync可以让v-model跨组件传值

v-model单独使用只能在本组件中实现双向数据绑定,加上sync则可以实现组件之间的传值