详解Vue的sync修饰符


Posted in Vue.js onMay 15, 2021

1 、指令

指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了。在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如:

<div v-text="x"> </div> //v-text指定标签文本指令
<div v-on:click="add"> <div> //v-on事件绑定指令

但并不是所有的指令都以 v- 开头,对于一些简写,也是指令,如

<img :src="x"> </img> //v-bind:src 的简写
<button @click="add"> </button> //v-on:click 的简写

2 、修饰符

修饰符是与指令中的事件处理指令 v-on 息息相关的一个语法糖,所谓语法糖就是很 sweet,简单好用,在编程界就是能帮你做好的都帮你做了,只剩最简单的事留给你做。

在事件处理程序中,有一些非常常见的需求,例如 event.preventDefault() 阻止默认事件和 event.stopPropagation()阻止事件冒泡等等。因此 Vue 就把这些事件处理过程中常见的需求帮我们处理好了,在我们需要时告诉 Vue 一声,它就会自动帮我们阻止默认事件、阻止事件冒泡等。那么我们告诉 Vue 的途径就是 Vue 提供给我们的修饰符,修饰符是由点开头的指令后缀来表示的

以阻止 <a> 标签的点击默认刷新页面事件的 preventDefault 方法示例如下:

普通做法

<a href="" v-on:click=" rel="external nofollow" pe($event)">Vue点击链接</a> //vue中访问原始的DOM事件,可以用特殊变量 $event 把它传入方法,在原始 HTML 中是 event
// ... 
methods: {
    pe(e){
        e.preventDefault()
    }
}

使用修饰符

<a v-on:click.prevent>Vue点击链接</a> //prevent修饰符就等同于上述的 e.preventDefault()

由上述的小例可以看出,修饰符是不是个语法糖,帮我们把常用的需求提前写好了,用的时候说一声就行。当有事件处理程序时直接在后面继续写即可,如下:

<a href="" v-on:click.prevent=" rel="external nofollow" pp">Vue点击链接</a>
// ... 
methods: {
    pp(){
        console.log('不跳转页面执行事件')
    }
}

修饰符是有顺序地执行的,如上述的 v-on:click.prevent="pp",意思就是在点击时,先执行修饰符 prevent 的阻止默认事件,然后再执行后面的 pp 事件处理函数。

修饰符几乎是和事件 event 的相关处理函数一一对应的,根据事件的不同,对应不同事件的修饰符,如下所示分为几大类:

详解Vue的sync修饰符

修饰符的来源和含义就是上述所述,至于具体有哪些,在实际用到时可去官网查找所需,有两个最最常用的需要记住,即 @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数据修改后的值

父组件可以监听那个事件并根据需要更新一个本地的数据属性

<myconponent :title="Ptitle" @update:title="Ptitle = $event" ></myconponent>
//在父组件中监听该事件,该事件触发后传递的值以 $event 接收,$event === newTitle ,Ptitle是父组件的数据

或者是定义的接受函数的参数

<myconponent :title="Ptitle" @update:title="val => Ptitle = val" ></myconponent>
//这时接收的值作为函数的参数

使用 .sync

上述的过程在实际需求中很常用,因此 Vue 就将父组件的监听定义成了一个传值时的修饰符,为 .sync ,上述代码使用 .sync 修饰符后为:

子组件(是一样的)

this.$emit('update:title', newTitle)

父组件

<myconponent :title.sync="Ptitle"></myconponent> //等同于上面的传值并监听

是不是很 sweet 呢?

4 、总结

.sync 的用法规则

1.组件不能修改 props 外部数据

2.this.$emit 可以触发事件,并传参

3.$event 可以获取 $emit 的参数

以上就是详解Vue的sync修饰符的详细内容,更多关于Vue的sync修饰符的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
深入理解Vue的数据响应式
May 15 #Vue.js
详解Vue的options
May 15 #Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 #Vue.js
Vue接口封装的完整步骤记录
Vue全家桶入门基础教程
vue实现可拖拽的dialog弹框
vue如何批量引入组件、注册和使用详解
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
php实现递归的三种基本方式
2020/07/04 PHP
php中请求url的五种方法总结
2017/07/13 PHP
Javascript开发包大全整理
2006/12/22 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python获取Linux发行版名称
2019/08/30 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
网络教育自我鉴定
2013/11/01 职场文书
中专生毕业自我鉴定
2013/11/01 职场文书
热能动力工程毕业生自荐信
2013/11/07 职场文书
实习教师个人的自我评价
2013/11/08 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
银行催款通知书
2015/04/17 职场文书
驻村工作简报
2015/07/20 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
《刷子李》教学反思
2016/02/20 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS