Vue中.sync修饰符

219 阅读1分钟

首先可以看下vue的规则

  1. 组件不能修改props外部数据
  2. this.$emit可以触发事件,并传参
  3. event可以获取event可以获取emit参数

在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:

this.$emit('update:money',new money)

然后父组件可以监听那个事件并且根据需要更新一个本地数据property。

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

为方便起见为这种模式作个缩写即用到了.sync修饰符

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

值得注意的是带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:money.sync=”total.money + ‘!’” 是无效的)。

而当我们用一个对象同时设置多个prop的时候,也可以将这个.sync修饰符和v-bind配合使用

<Child v-bind.sync="total"></Child>

这样会把 total 对象中的每一个 property (如 money) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。

综上

:money.sync= "total"等价于:money="total" v-on:update:money="total=$event" 一个是语法糖(.sync修饰符)另一个是原理,语法糖虽好用,但要明白原理才能灵活运用。