事件修饰符-大汇总

1.once

按钮只能点一次

2.native

是用来是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签看待。

         常用于 给事件绑定点击事件时使用,

肯定会想,都已经绑定点击事件了,为啥还要给它加个.native事件修饰符

这说来话长,待我长话短说

因为给原生的事件绑定@click点击事件, 即使你点很久它都不带生效的,

又有一个疑问,那为啥给 el-button 绑定时生效,因为那是 Element组件自带的

那怎么让原生的点击事件生效,只需在

< MyCom @click.native="click1" />

加个.native修饰符

也可以用简短的话描述 : 就是 注册点击事件后,其他代码无误下,点击无效,就可以添加

3.sync修饰符

它的作用跟v-model相似都可以实现父跟子间的双向绑定

它的原理是

// 正常父传子： 
<com1 :a="num" :b="num2"></com1>

// 加上sync之后父传子： 
<com1 :a.sync="num" .b.sync="num2"></com1> 

// 它等价于
<com1 
  :a="num" @update:a="val=>num=val"
  :b="num2" @update:b="val=>num2=val"></com1> 

// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

 示例

 总结

.sync与v-model区别是

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。

• 区别点：

• • 格式不同。 v-model="num", :num.sync="num"

• • v-model：    @input + value

• • :num.sync:    @update:num

• • v-model只能用一次；.sync可以有多个。 

补充知识点 : 

以上的不同点仅存在与 vue2 中    在vue3 中没有.sync修饰符,  而v-model升级了 可以 一个组件可以有多个 v-model

4.number

这个修饰符,贼秀了,一旦设置这个只能输入数字,其他的都输入不了,

5.trim 

去除输入框首尾字符串

6.lazy

阻止数据跟视图间的双向绑定,

一句话就是 有一方发生改变时,另外一方不会发生改变

7.stop

阻止事件冒泡  

8.prevent

阻止默认行为

比如表单的默认行为 : 就是当 from表单点击提交后,填写的数据会出现在当前页的搜索栏中,因此要使用这个修饰符来阻止这种默认行为

总结 : 其中4、5、6是v-model的修饰符

 v-model补充点

它的原理是

<com1 v-model="num"></com1>
等价于
<com1 :value="num" @input="(val)=>this.num=val"></com1>