修饰符
4个常用的修饰符
@click.stop = "xxx" 阻止冒泡机制
@click.prevent = "xxx" 阻止默认动作，常用于表单
@keypress.enter = "xxx" 键盘事件触发则调用xxx函数
:msg.sync = "xxx" 父子组件双向绑定，父组件监听子组件触发的事件并获取参数
.sync 修饰符
好好的语法糖，结合了发布者-订阅者模式（Vue内置了eventBus，即this.$emit）的方式来实现的
案例1，from 洪定伦
<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></my-comp>
<!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
Vue.component('my-comp', {
template: '<div @click="increment">点我+1</div>',
data: function() {
return {copyFoo: this.foo}
},
props: ['foo'],
methods: {
increment: function() {
this.$emit('update:foo', ++this.copyFoo);
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>
就是上处的<my-comp :foo.sync="bar"></my-comp>
扩展成了<comp :foo="bar" @update:foo="val => bar = val"></comp>
成为一个自动更新父组件属性的 v-on 监听器
vue .sync 修饰符
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，其实真正的双向绑定是存在一定问题的，因为父组件可以修改子组件，子组件也可以修改父组件，这样我们就无法看到明显的变更来源
这是尤雨溪推荐我们以 update:myPropName 的模式触发事件取而代之的原因
Vue 的3个规则
- 组件不能修改 props 外部数据
-
this.$emit可以触发事件，并传参 -
$event可以获取$emit的参数
案例2
<!--App.vue-->
<template>
<div id="app">
<p>儿子向父亲要零花钱例子</p>
<p>父亲：</p>
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total=$event"/>
</div>
</template>
<!--JS-->
<script>
import Child from './components/Child.vue'
export default {
data(){
return{total:10000}
},
components: {Child}
}
</script>
<!--Child.vue-->
<template>
<div class="child">
<p>儿子：</p>
{{money}}
<button @click="$emit('update:money',money-100)"><span>花钱</span></button>
</div>
</template>
<!--JS-->
<script>
export default {
props:["money"]
}
</script>
image.png
- “爸爸”（父组件 App.vue）有10000元
- “孩子”（子组件 Child.vue）每次点击花钱按钮就会花掉100元
- “爸爸”（红）和“孩子”（绿）显示的 money 会相应的变化
这里的<Child :money.sync="total"/>
扩展为<Child :money="total" v-on:update:money="total = $event"/>
