Vue修饰符

一、.sync修饰符

// 子组件Props里有money
<script>
export default {
  props: ["money"]
};
</script>

爸爸：
<template>
  <div class="app">
    // 绑定子组件的money属性
    <Child :money="total"  />
  </div>
</template>

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

子组件中的prop发生变化时，会触发一个emit事件，并传入新的值

//子组件
<button @click="$emit('update:money', money - 100)">
      <span>花钱</span>
</button>

父组件用v-on:'update:money' 监听 update:money事件，并用$event拿到参数

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

.sync相当于一个语法糖，简化父组件的代码，意为监听子组件prop的变化并同步显示新的值

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

这句代码就代替了上面那句
总结：
<Child :money.sync="total" /> 等价于 绑定属性+监听事件+更新属性
<Child :money="total" v-on:update:money="total = $event" />

二、事件修饰符

.stop

<div @click="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

@click.stop 可以一键阻止冒泡， 相当于调用了event.stopPropagation()方法。

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>
//只输出1

.prevent

用于阻止事件的默认行为，相当于写event.preventDefault() 例如，当点击提交按钮时阻止对表单的提交。 阻止点击a标签时跳转链接

//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 点击a标签不会跳转链接
<a @click.prevent href="baidu.com"></a>

三、键值修饰符

<input type="text" @keypress.enter="xxx">

当用户在键盘 敲下enter回车键时，会触发xxx事件