详解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-cli 创建模板项目
Nov 19 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
通过实例了解python property属性
2019/11/01 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
开业庆典活动策划方案
2014/09/21 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL