Vue3 推荐使用 v-model 替代 sync !!!!
理解.sync之前,先来看几个Vue规则:
- Vue规则:组件不能修改props外部数据
- Vue规则:$emit可以触发事件,并传参
- Vue规则:emit的参数
然后我们来想象一个场景: 爸爸给儿子钱,儿子想花钱,但他不能直接花钱,儿子需要打电话(会触发一个事件$emit)向爸爸要钱;
由于上面这种场景很常见:就是我把数据给你,但是你要改的话你得通知我改;
所以呢尤雨溪发明了.sync
:money="total" v-on:update:money="total = $event"
等价于
:money.sync="total"
作用:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
代码示例:
App.vue
<template>
<div class="app">
App.vue 我现在有 {{ total }}
<hr />
<!-- <Child :money="total" v-on:update:money="total = $event" /> -->
<Child :money.sync="total" />
</div>
</template>
<script>
import Child from "./cd.vue";
export default {
data() {
retur { total: 10000 };
},
components: { Child: Child },
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
cd.vue
<template>
<div class="child">
{{ money }}
<button @click="$emit('update:money', money - 100)">花钱</button>
</div>
</template>
<script>
export default {
props: ["money"],
};
</script>
<style lang="stylus">
.child {
border: 3px solid blue;
}
</style>