常见的几种指令修饰符
修饰符 (modifier) 是以半 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
//阻止默认事件传播,阻止冒泡事件 @click.stop="add"
// 表示阻止默认动作 @click.prevent="add"
//同时表示两种意思 @click.stop.prevent="add"
如果用户按下了回车键就执行y
//.enter是按键修饰符
@click.enter="y"
//等价于,enter键的值就是13
@click.keypress.13="y"
按键修饰符
.sync修饰符
组件不能直接修改props外部的数据
如果强行修改外部的属性会报错
这个是子组件Child 点击按钮减去100,money的值与父组件的total值一样:money="total"
<button @click="money-=100"> <span>花钱</span> </button>
需要使用$emit()函数;触发当前实例上的事件。附加参数都会传给监听器回调(父组件)。
在子组件使用 $emit(‘参数1’,参数2) 当前实例继承了eventBus,可以触发一个事件
<!-- $emit()触发一个事件,update:money是事件名 --> <button @click="$emit('update:money',money-100)">
在父组件使用$$event()接受参数2 他就是接收子组件参数2返回的结果的
<!-- 传给子组件一个money值,v-on是监听子组件的update:money事件,$event获取子组件事件的结果--> <Child :money="total" v-on:update:money="total = $event" />
父组件这一大段代码太麻烦了,vue把它封装成了一个修饰符
<Child :money.sync="total" />