结论:.sync 是 Vue 提供的语法糖,用来简化代码的。下面就通过代码示例来说明。
业务场景:父组件有一个 total 变量,每当子组件的按钮被点击时 total 都会按照子组件提供的逻辑对 total 进行更改。
情况一:不使用 .sync 实现,实现思路,子组件的按钮被点击的时候会发布一个事件,父组件就监听这个事件,事件触发父组件就会执行相应的业务逻辑。
首先定义父组件和子组件:
// 这是父组件
<template>
<div>
{{ total }}
<Children :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Children from "./Childen";
export default {
components: {Children: Children},
data: function () {
return {total: 100}
}
}
</script>
//这是子组件
<template>
<div>
Children: {{ money }}
<button @click="$emit('update:money',money - 10)">
<span>按钮</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
}
</script>
我们可以看到,子组件的变量 money 是一个外部变量,子组件监听 click 事件,被触发就通过 Vue 提供的 Evenbus 来发布名字为 update:money 的事件,money - 10 为事件将要执行的业务逻辑。父组件就监听update:money 这个事件,触发就通过 $event 拿到执行结果。
情况二:使用 .sync 简化代码:
首先定义父组件和子组件:
// 这是父组件
<template>
<div>
{{ total }}
<Children :money.sync="total"/>
</div>
</template>
<script>
import Children from "./Childen";
export default {
components: {Children: Children},
data: function () {
return {total: 100}
}
}
</script>
//这是子组件
<template>
<div>
Children: {{ money }}
<button @click="$emit('update:money',money - 10)">
<span>按钮</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
}
</script>
重点在如下两行代码:
<Children :money="total" v-on:update:money="total = $event"/>
<Children :money.sync="total"/>
.sync 是一个语法糖,它可以简化代码,但是也更抽象,所以一定要明白语法糖背后帮我们做了什么,这样当 api 变化时我们才能更快的适应和学习。