简单的说 sync 就是一个能实现 prop 双向绑定的语法糖,
比如 在我们组件化的时候,父组件提供数据 传递给 子组件 props 接收,而子组件根据业务 需要更改 父组件的数据,此时 就能用到 sync 修饰符了
//父组件
<template>
<div>
<!-- 使用 sync 语法糖写法 -->
<cell-bar :cellTitle.sync="cellTitle" />
<!-- 完整写法 -->
<cell-bar @update:cellTitle="(res)=>cellTitle=res" :cellTitle="cellTitle" />
<div/>
<template/>
export default {
data () {
return {
cellTitle:'标题'
}
},
}
//子组件
export default {
props: ['cellTitle'],
methods: {
//change 事件
onChange (value) {
//注意 'update : ***' 是固定写法
this.$emit('update:cellTitle', value)
}
}
}