sync修饰符的功能
- 现在我们主要把sync当做语法糖来使用，当我们用sync修饰一个props值时，那么当一个子组件改变了一个props的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们也可以props传初始值，然后v-on事件监听，实现起来也不算复杂。下面我们举一个例子
//这是子组件
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)"><!--用Vue提供的$emit触发事件update:money，并将money-100传给父元素-->
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
//这是父组件
<template>
<div class="app">
我现在有 {{total}}
<hr>
<Child :money.sync="total"/><!--在props值money后面加sync修饰符，他会将子组件的所改变的值自动传给父组件，此时的值为money-100-->
<!--如果我们不用.sync修饰符，代码就会复杂一些，就用v-on去监听update:money这个事件
<Child :money="total" v-on:update:money="total = $event"/>-->
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }<!--可以写成{ Child }-->
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
//main.js
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
- 结果如图所示
当我们点击花钱的时候，钱数就会减少100
