小白菜笔记 Vue （三）修饰符

修饰符

修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

常见的修饰符

• .stop：阻止事件冒泡
• .prevent：取消事件默认行为
• .sync：用于对prop的双向绑定

这里有一个关于.sync用法的例子

父组件代码

<template>
  <div id="app">
    {{total}}<br/>
    使用@update:total
    <Child :total="total" @update:total="total = $event"></Child>
    使用.sync
    <Child :total.sync="total"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue"

export default {
  name: "App",
  data: () => {
    return {
      total: 100
    }
  },
  components: {
    Child: Child
  }
};
</script>

子组件代码

<template>
<div>
  <button @click="$emit('update:total', total+10)">+10</button>
  <button @click="$emit('update:total', total-10)">-10</button>
  </div>
</template>

<script>
export default {
  props: ['total']
}
</script>

以上代码实现通过点击子组件按钮修改父组件数据。通过例子可以看到.sync能够实现和@update:total="total = $event"一样的效果。