|
Vue可以使用 v-on 指令监听DOM事件，并在触发时运行一些JavaScript代码
可以直接写在v-on中，也可以只写函数名字，有时候需要在内联语句处理器中访问原始的DOM事件，可以用特殊变量 $event 把它传入方法。
在事件处理程序中经常会用到 event.preventDefault() 或者 event.stopPropagation()?
为了能让我们的事件处理方法中只有纯粹的数据逻辑，而不是处理DOM事件细节，我们为v-on 提供了事件修饰符，也就是在.开头的指令后缀来表示
有几个修饰符是比较常见的：
@click.stop="XXX"
@click.prevent="XXX"
@keypress.enter="XXX"
@:money.sync="total"
其中
<!-- 阻止单击事件继续传播 —>
<a v-on:click.stop="doThis"></a>?
<!-- 提交事件不再重载页面 —>
<form v-on:submit.prevent="onSubmit"></form>?
<!-- 修饰符可以串联 —>
<a v-on:click.stop.prevent="doThat"></a>?
<!-- 只有修饰符 —>
<form v-on:submit.prevent></form>?
<!-- 添加事件监听器时使用事件捕获模式 —>
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 —>
<div v-on:click.capture="doThis">...</div>?
<!-- 只当在 event.target 是当前元素自身时触发处理函数 —>
<!-- 即事件不是从内部元素触发的 —>
<div v-on:click.self="doThat">...</div>
.sync
因为我们经常需要对一个prop进行“双向绑定”。也就是子组件可以访问这个属性，父组件也可以访问这个属性，但是这样会导致当属性变化的时候，我们不知道是哪个组件引起的这个变化。
.sync相当于在监听具有双向绑定的属性变化时，而实时更新属性值
以下是一个实例：爸爸给儿子钱，儿子要花钱，所以需要每次跟爸爸要钱，但是钱不能全部放到儿子这里。这里面，money就是一个具有双向绑定的属性。
vue呢，有3个规则。
- 组件不能修改props外部数据
- this.$emit可以触发事件，并传参
- $event 可以获取$emit的参数
App.vue
<template>
<div class="app">
App.vue 我现在有 {{ total }}
<hr />
<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>
这样做了之后，当我们点击花钱的时候，child.vue里面的money会变化,因为app.vue里面的money使用了sync，所以app.vue里面的money也会对应的变化。
.sync更像是一个语法糖，以下两段代码是等价的：
<Child :money.sync="total" />
<Child :money="total" v-on:update:money="total = $event" />
//监控，update:money发生变化的时候，把$event的值，赋给total?
//$event可以访问到$emit 抛出的的第二个值
|