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則可以實作元件之間的傳值