Vue 的 .sync 修饰符

时间: 2020-03-14阅读: 234标签: vue

写在前面

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。


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="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="pp">Vue点击链接</a>
// ... 
methods: {
    pp(){
        console.log('不跳转页面执行事件')
    }
}

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

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


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数据修改后的值

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

<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 的参数


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8196

简单理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法

vue中is的作用和用法

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

一点 Vue.observable 想法

Vue 2.6.0 新增了 Vue.observable api,但最近才去尝试使用它。这东西说新也不新,因为他就是 vue 本身的功能,只是暴露出来,成为新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一样。

Vue中props知识点

如果你一直在阅读有关\\\"props\\\"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

vue有时候你不需要 $emit & $on

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广