Vue重要修饰符.sync对比v-model的区别及使用详解

2024-09-27 07:14:14

Vue 中的双向绑定

上一节中我们已经讨论过Vue中并没有真正的双向绑定。Vue中的 props等数据是单向流动的，由父级至子级向下绑定的，即：每次父组件更新时，子组件中的所有 props 都会刷新为最新的值。如果在子组件中修改 props ，Vue会向你发出一个警告，且并不能通过修改子组件的数据来更改父组件的数据）。

如果有需求，我们可以在父组件中，子组件的标签上声明一个监听事件，在子组件想要修改数据时使用$emit触发事件并传入新的值，通知父组件进行修改。这就可以实现某种程度上的双向绑定。

真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。Vue 团队推荐以 update:myPropName 的模式触发事件取代直接修改的操作。这就用到了 .sync 修饰符。

Vue 中的 .syc 修饰符

自定义组件中，v-bind命令的 .sync 修饰符同 v-model 一样，其实本质上都是Vue的语法糖，用于实现父子组件间接的数据双向绑。需要注意的一点是，Vue3 中已经不再有 .sync 修饰符了，新的 v-model 取代了 Vue2 中的 v-model 和 .sync 修饰符。本文作为 Vue 入门的心得总结，这里讨论的是 Vue2中的 .sync 修饰符。

一言以蔽之，v-bind命令的.sync 修饰符实质就是父组件监听子组件更新某个props的请求的缩写语法，一种语法糖。

如：

<Child v-bind:title.sync="title" />

完全等价于：

<Child
  v-bind:title="title"
  v-on:update:title="title = $event"
></Child>

与之配合，在子组件中，需要添加下面这段代码来通知父组件对这个prop重新赋值：

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

这一个 $emit 可以通过绑定事件触发，也可以使用 watch 监听等方式来触发。

此外，当我们用一个对象 obj 同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

<Son v-bind.sync="obj"></Son>

data(){
        return {
            obj:{read:true, name:'', title:'', length:''}
        }
    },

这样会把 obj 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

.sync 使用注意事项

需要注意，带有 .sync 修饰符的 v-bind命令不能和表达式一起使用
(例如 :title.sync=”doc.title + ‘!’” 是无效的)。

你只能提供你想要绑定的 property 名，类似 v-model。

另外还需要注意将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

.sync 与 v-model的比较

.sync 从功能上看和 v-model 十分相似，都是为了实现数据的“双向绑定”，本质上，也都不是真正的双向绑定，而是语法糖，这是他们的相同之处。

但相比较之下，.sync 更加灵活，它可以在一个组件内给多个 prop 使用，而 v-model 在一个组件中只能有一个 prop ，在 Vue2 中是这样。

需要注意，Vue3中 v-model 已经可以给多个prop使用了

从语法的内容来看，v-model 绑定的值和触发的事件是较为固定的，根据不同类型的特定组件有对应的绑定值和事件，比如 input 组件，select 组件等表单组件，日期时间选择组件，颜色选择器组件等，这些组件所绑定的值使用 v-model 比较合适。

其他情况下，需要父子组件之间数据相互更新，还是使用 .sync。.sync 针对更多的是各种的状态变更，在父子组件之间互相传递，是一种 update 操作。

以上就是Vue重要修饰符.sync对比v-model的区别及使用详解的详细内容，更多关于Vue修饰符.sync v-model的资料请关注我们其它相关文章！

详解VUE自定义组件中用.sync修饰符与v-model的区别

.sync修饰组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-03</title>  <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css&q
Vue3父子组件传参有关sync修饰符的用法详解

目录单向数据流讲解 Vue2.x使用定义事件的形式, 通知父组件修改 .sync 和 update: 的使用父传子, 传递多个数据的简写采用v-model简写(要求严格) Vue3.x使用普通用法简写单向数据流讲解单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用定义事件的形式
vue中v-model和.sync修饰符的区别

目录前言一.v-model 1. 作用 2.v-model的本质 3. v-model的特殊用法二..sync修饰符 1. .sync修饰符作用 2. .sync修饰符本质总结 .sync与v-model区别是前言在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖.但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符.在这里就两者的使用进
vue中v-model指令与.sync修饰符的区别详解

目录 v-model .sync 细微之处的区别总结功能作用场景: v-model  <template>  <Child v-model="model"></Child>   <Ch
vue修饰符v-model及.sync原理及区别详解

目录 v-model的原理 .sync的原理 v-model和.sync修饰符的区别总结作用场景: v-model的原理 v-model的本质,其实就是:value和@input事件的语法糖  <my-component type="text" v-model="num">  <my-component type="text" :value
Vue重要修饰符.sync对比v-model的区别及使用详解

目录 Vue 中的双向绑定 Vue 中的 .syc 修饰符 .sync 使用注意事项 .sync 与 v-model的比较 Vue 中的双向绑定上一节中我们已经讨论过Vue中并没有真正的双向绑定.Vue中的 props等数据是单向流动的,由父级至子级向下绑定的,即:每次父组件更新时,子组件中的所有 props 都会刷新为最新的值.如果在子组件中修改 props ,Vue会向你发出一个警告,且并不能通过修改子组件的数据来更改父组件的数据). 如果有需求,我们可以在父组件中,子组件的标签上声明一个
Vue 按键修饰符处理事件的方法

按键修饰符在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修饰符时, 我们可能会去监听键盘事件, 根据 keyCode 的值加以判断 Vue 新增按键修饰符和系统修饰符来处理类似事件 /** 提交表单 */ <template> <div class="demo"> 电话号码: <input type="text" placeholder="请输入电话号码" v
vue事件修饰符和按键修饰符用法总结

之前关于vue事件修饰符和按键修饰符的一点分析,最近需要回顾,就顺便发到随笔上了在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .prevent .capture
详解Vue 事件修饰符capture 的使用

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则由外而内触发. 就是谁有该事件修饰符,就先触发谁. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title&g
vue element实现将表格单行数据导出为excel格式流程详解

由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v
Vue网页html转换PDF（最低兼容ie10）的思路详解

HTML转PDF: 1.页面底层实现--Vue:最低兼容ie10 2.实现思路: 1> 使用html2canvas.js将网页转换为图片 2> 使用jsPdf.debug.js将canvas生成的图片转换为pdf文件具体实现: 要这样实现首先要引入两个插件: html2canvas.js jsPdf.debug.js 注: 因为ie10在canvas截图时候会出现部分样式丢失的情况,所以在代码中有部分修改了页面的样式所以建议在做截图的时候,将页面代码复制一份到隐藏域,在隐藏域里面做修改,这
vue vue-Router默认hash模式修改为history需要做的修改详解

主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所
Vue中使用方法、计算属性或观察者的方法实例详解

熟悉 Vue 的都知道方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&
vue项目中使用 pako.js 解密 gzip加密字符串的代码详解

前言今天跟后台对接一个接口,接受到一个加密的值,说是通过gzip加密过的,然后就蒙蔽了, 赶紧上百度找了一下资料,通过一篇文章(原文在底部)发现有个js库可以解密,就下载轻松解密了实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from 'pako' // 一个是加密:window.btoa(),一个是解密:window.atob() function decode(e
vue 父组件通过$refs获取子组件的值和方法详解

前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中利用$emit触发这个事件并带上数据作为第二个参数,这时父组件中监听事件的回调函数就会被调用,回调函数的参数就是子组件带上来的数据,这样就可以在父组件中使用子组件的数据了, 兄弟之间的传递:我们可以使用事件总线(eventBus)来轻松的解决,其实就是发布订阅者模式今天我们要看的是父组件如何直接调

Vue重要修饰符.sync对比v-model的区别及使用详解

目录

Vue 中的双向绑定

Vue 中的 .syc 修饰符

.sync 使用注意事项

.sync 与 v-model的比较

相关推荐

随机推荐