走近Vue的.sync修饰符

时间：2023-03-31 23:32:36 vue.js

写在前面。同步修饰符是所有Vue修饰符中最难理解的一种。本文将带您走近.sync的世界。深入了解之后，你会发现，其实是这样的。修饰符与指令密切相关。下面从指令->修饰符->.sync修饰符由浅入深地解释.sync的含义和用法。1说明是指令。从字面上看，我告诉你该怎么做，只要发出指令，然后让收到指令的人去做。Vue中的指令有统一可识别的格式，即以v-开头的指令为指令，如：

//v-text指定标签文本指令

//v-on事件绑定指令但并不是所有的指令都以v-开头，有些缩写也是指令，比如//v-bind:src的简写//v-on的简写:click2修饰符修饰符与指令中的事件处理指令相同v-与on密切相关的句法糖。所谓语法糖，很甜，简单易用。在编程的世界里，能为你做的都为你做，只有最简单的事情留给你去做。在事件处理器中，有一些很常见的需求，比如event.preventDefault()防止默认事件，event.stopPropagation()防止事件冒泡等等。因此，Vue为我们处理了这些事件处理过程中的常见需求。当我们需要告诉Vue时，它会自动帮我们防止默认事件，防止事件冒泡等。那么我们告诉Vue的方式就是Vue提供给我们的修饰符。修饰符由点号开头的指令后缀表示，防止标签点击默认刷新页面事件。preventDefault方法示例如下：常见做法Vue点击链接//在vue中访问原始DOM事件，可以使用特殊变量$event将其传递到方法中，在原始HTML中是event//...methods:{pe(e){e.preventDefault()}}使用修饰符Vue点击链接//prevent修饰符相当于上面的e.preventDefault()从上面的小例子可以看出，修饰符是不是语法糖，帮我们写的常用的需求提前说好，用到的时候说出来就好了。有事件处理器的时候，后面继续写就好了，如下：Vue点击链接//...methods:{pp(){console.log('不跳转页面执行事件')}}修饰符是顺序执行的，比如上面的v-on:click.prevent="pp"，意思是点击的时候，先执行修饰符prevent阻止default事件，然后执行后续的pp事件处理函数。修饰符几乎与事件相关的处理函数一一对应。根据不同的事件，不同事件对应的修饰符分为以下几类：Vue官网-事件修饰符Vue官网-按钮修饰符修饰符的来源和含义如上所述。至于具体有哪些，大家实际使用的时候可以去官网找自己需要的。最常用的有两个要记住，就是@click.stop是防止事件冒泡，@click.prevent是防止默认事件，@keypress.enter是按下按钮作为回车事件。3.sync修饰符.sync修饰符比较特殊，因为它不是event事件原有的事件处理相关函数的演化，而是Vue自己定义的修饰符，如上述修饰符分类。sync被归类为自定义事件的修饰符，那么这个自定义事件到底是什么呢？该事件对应于eventBus事件。eventBus事件是MVC中的一种模式。简单的说就是发布和订阅的过程。也就是说，有两方。甲方负责始终监控一个事件，乙方负责在需要时触发该事件。事件，甲方会在事件触发时进行一定的操作。甲方是订阅，乙方是发布，双方都是发布和订阅。那么什么时候需要在Vue中使用这种情况呢？即Vue组件在接受外部数据props时，Vue规定子组件通过props接收到外部数据后，只有对数据的使用权，而无权修改属性。因为，如果子组件修改了外部传过来的数据，那么子组件和使用它的父文件都可以被改变。父组件和子组件没有明显的变化源，数据最终也无从知晓。谁改的，数据不好管。所以Vue规定组件只能有使用props属性的权利，不能自己改变。如果他们要改变，他们必须通知数据的真正拥有者改变，即使用组件的父文件。它使用的通知方式是eventBus的发布订阅方式。不要使用.sync子组件来触发事件。事件名称的格式必须是update:myPropName，使用$emit函数触发this.$emit('update:title',newTitle)//newTitle是你要修改的props数据的修改值parent组件可以监听该事件并根据需要更新本地数据属性//监听父组件中的事件，事件触发后传递的值被接收为$event，$event===newTitle，Ptitle为父组件的数据或定义的接受函数的参数Ptitle=val">//此时接收到的值作为函数的参数。sync上面的过程在实际需求中很常见，所以Vue在传值的时候定义了对父组件的监听作为修饰符，对于.sync，上面代码使用.sync修饰符为：子组件（同）this.$emit('update:title',newTitle)parentcomponent//就相当于上面的传值和监听，是不是很爽？4总结.sync的使用规则组件不能修改props外部数据this.$emit可以触发事件，传递参数给$event获取$emit的参数

上一篇：Oracle主键自增列

下一篇：vue数据刷新后，如果设置了overflow-scroll，下拉进度条还停留在最后的位置

走近Vue的.sync修饰符相关文章