Vue 中的 .sync 修饰符有什么用?

2021-05-17 128 阅读1分钟

.sync修饰符

本节讨论一下.sync修饰符，.sync其实是个语法糖

尤雨溪规定了以下几条规则：

Vue规则：组件不能修改props外部数据
Vue规则：this.$emit可以出发时间，并传参
Vue规则：$event可以获取$emit的参数

而由于这种场景很常见，于是尤雨溪发明了.sync

代码示例如下：

<template>
  <div class="app">
    我现在有{{ total }}
    <hr />
    <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 },
};
</script>

<style>
.app {
  border: 1px solid red;
  padding: 10px;
}
</style>

而其中:money.sycn="total"等价于:money="total" v-on:update:money="total=$event"

<template>
  <div class="app">
    我现在有{{ total }}
    <hr />
    <child :money.sync="total" />
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child },
};
</script>

<style>
.app {
  border: 1px solid red;
  padding: 10px;
}
</style>