Vue 中的 .sync 修饰符

sync 修饰符

• 因为子组件不能直接修改其props，所以需要$emit触发一个事件，并将改变的值的结果作为一个参数传出去。父组件再监听这个事件的时候，$event可以获取$emit的参数然后再由父组件更改props
• 用法：假如有一个props数据money

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

• 会被扩展为：

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

注意

1. vue的三条规则

• Vue规则:组件不能修改props外部数据
• Vue规则：this.$emit可以触发事件，并传参
• Vue规则：'$event'可以获取以上触发事件传的参数

2. 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>