sync 修饰符
- 因为子组件不能直接修改其props，所以需要
$emit触发一个事件，并将改变的值的结果作为一个参数传出去。父组件再监听这个事件的时候，$event可以获取$emit的参数然后再由父组件更改props
- 用法：假如有一个props数据money
<Child :money.sync="total"/>
<Child :money='total' v-on: updata:money ="total=$event"/>
注意
- vue的三条规则
- Vue规则:组件不能修改props外部数据
- Vue规则：this.$emit可以触发事件，并传参
- Vue规则：'$event'可以获取以上触发事件传的参数
- bind和sync
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用
- (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model
<text-document v-bind:title.sync="doc.title"></text-document> //这样是可以的
- 当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
- 这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器
<text-document v-bind.sync="doc"></text-document>
代码举例
//Child.vue部分
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
//$emit触发事件，并传参、
//这里不能直接更改prop的值，所以需要用$emit触发事件
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
//App.vue部分
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/>
//$event可以获取$emit的参数
//给props传值，并且可以等价于<Child :money.sync="total"/>
</div>
</template>
<script>
import Child from "./Child.vue"; //引入Child.vue
export default {
data() {
return { total: 10000 };
},
components: { Child: Child } //等价于components: {Child}
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
