Vue 中的 .sync 修饰符

App.vue:

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
<Child :money.sync="total"/>
  </div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
    return { total: 10000 };
  },
components: { Child: Child }
};
</script>

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>

当click button时，直接触发事件，子组件通知父组件，父组件修改total，完成整个流程。

代码中：

<Child :money.sync="total" />

等价于:

<Child :money="total" v-on:update:money = "total = $event" />

所以说，vue 修饰符.sync的功能是：当一个子组件需要改变了一个 prop 的值时，会通知其父组件进行同步的修改。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容