sync是Vue中的一个修饰符,官方的意思是对prop进行的一个双向绑定。也就是说,sync修饰符的功能是:当一个子组件改变了一个来自外部(prop)的值时,这个值的变化也会绑定到父组件,使父组件中的值也进行更新。
这里有一个例子能够帮助说明这一点,这里有一个Vue子组件:
// Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
这个子组件接受一个来自外部的money变量,这个子组件的需求是,当点击按钮时,money数据改变的同时,也伴随着父组件数据的改变,但是这一点对于Vue本身来说是不允许的,因为Vue规定了子组件不能直接修改父组件的数据,会报错。
但是父组件用sync修饰符就可以很简单的做到这一点。
// App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money.sync="total"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
这里父组件用sync监听到了子组件上数值的变化,并进行双向绑定,同时修改了父子组件中的数据。