vue中有哪些修饰符和事件修饰符

vue中有哪些修饰符和事件修饰符

1、常见修饰符有.sync，.lazy，.passive
(1).sync
因为vue是单向数据流，从父组件传到子组件的数据，子组件如果修改数据会报错，加上.sync后子组件内部改变props属性值并更新到父组件中
(2).lazy
v-model双向数据绑定，输入框输入内容时视图就更新了，如果想要输入完所有数据再更新视图，可以通过添加.lazy实现光标离开后再更新视图

<input type="text" v-model.lazy="value">

(3).passive
在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.passive修饰符

<div v-on:scroll.passive="onScroll">...</div>

(4).native
这个修饰符只能是操作在组件上，把一个vue组件转化为一个普通的HTML标签，如果是操作在普通HTML标签上会失效
2、常见的事件修饰符.stop, .prevent, .self, .capture, .passive, .once
(1).stop
防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。
(2).prevent
某些标签拥有自身的默认事件，比如标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。
(3).capture
捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行
(4).self
将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响
(5).once
这个比较好理解，加上once修饰符以后事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。
(6).passive
使用.passive就可以提前告诉浏览器，我们没有用preventDefault阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。