Event modifier

It’s a very common requirement to call event.preventDefault() or event.stopPropagation() in event handlers. While this could easily be done in a method, it’s better if the method has pure data logic instead of dealing with DOM event details.

To solve this problem, vue.js provides event modifiers for V-Ons. As mentioned earlier, modifiers are represented by an instruction suffix beginning with a dot.

  • .stop prevents bubbling events

  • .prevent prevents default events

The sync modifier

<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"> </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>Copy the code

Summary: The code
will be extended to
bar = val”> The.sync modifier is just a bidirectional binding event, syntactic sugar in subscribe publishing mode.

The main content of this article comes from how to understand the. Sync modifier for Vue

Finally, thank you for your reading. If you have any questions, please make corrections.