sync不生效 vue_vue组件双向绑定.sync修饰符的一个坑

最新推荐文章于 2021-02-04 21:54:03 发布
最新推荐文章于 2021-02-04 21:54:03 发布
阅读量927 收藏
点赞数 1
文章标签： sync不生效 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34260787/article/details/112889412
版权

我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。

在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发

this.$emit('update:foo', newValue)

这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。

根据文档

.

会被扩展为：

bar = val">

所以update:foo就是事件的名称，事件里面是一个函数，传入val参数赋值给bar变量。。。。所以update:foo是一个事件名，你加空格就完全变了一个事件名了。

至于怎么变，估计得看文档，我也不懂-_-

043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

python中关于元组的操作

元组的基本操作:1.创建一个元组: tuple=(1,26); tuple1=(","sy"); 创建一个空元组: tuple=(); 元组中只包含一个元素时,需要在元素 ...

基于libevent的tcp拆包分包库

TCP/IP协议虽然方便,但是由于是基于流的传输(UDP是基于数据报的传输),无论什么项目,总少不了解决拆包分包问题. 以前的项目总是每个程序员自己写一套拆包分包逻辑,实现的方法与稳定性都不太一致.终 ...

Linux TCP并发请求溺出 调优

TCP并发请求溺出 调优:系统开启某个监听端口后,当多个TCP请求连接监听端后,会把多个请求交给backlog的默认监听队列由socket server一并处理,backlog有自己的队列长度默认12 ...

Python知识

1   注释 单行注释:#  内容 多行注释:A   """                   ''' 内容            或    内容 "&quo ...

茜茜丁
关注
sync不生效 vue_vue .sync修饰符的使用详解
weixin_34061587的博客
12-31 538
vue的官网介绍非常不错，先通读一遍。2.3.0+ 新增在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。这也是为什么我们推荐以 update:my-prop-name的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对...
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1199
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has...
关于vue使用修饰符.sync修饰符实现双向数据绑定没效果的一个原因(坑)
04-21 3387
我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发this.$emit('update:foo', newValue)这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加...
vue组件双向绑定.sync修饰符的一个坑
weixin_34377065的博客
04-21 816
我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。 在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发 this.$emit('update:foo', newValue) 这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯...
sync不生效 vue_vue .sync的使用
weixin_34942564的博客
12-31 833
在使用vue的.sync中，怎么都用不出来。出来错误:I Avoid mutating a prop directly since the value will be overuritten whenever the parent component re-renders.查资料，说的都是vue2以上，取消了.sync..只能在vue1以下用.可官方的资料中可以用呀:.sync修饰符.官方的...
vue双向绑定时添加.sync不起作用的原因
weixin_30344795的博客
07-06 997
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component> 以上代码是子组件向父组件传数据的代码，加了.sync，但是不起作用，原因是vue的版本不同，2.0版本以上不起作用，而以下版本才起作用。 所以，在参考网上例子时，vue版本也应该考虑进去。 转载于...
vue中的父子传值双向绑定及数据修改视图不更新问题
ZJW222的博客
06-12 4079
在进行父子组件传值时，用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值，视图未发生变化的解决办法，当时完成项目时，一直未找到原因，修改了好久。 1.父子组件传值双向绑定 在传递给子组件中的变量上使用.sync修饰符，就能够实现父子传值的双向绑定 <!-- 父组件 --> <template> <div class="audioCate...
【2022.4.20更新】Vue_day03_Browser-sync使用_Sublime代码片段_计算属性_自定义指令_todoMVC项目
pre_eminent的JAVA学习园地
04-27 1072
Vue.js 四天课程学习笔记_第3天课程内容概要:1. 介绍browser-sync安装和配置使用 (强烈推荐!从此告别手动刷新F5)2. 灵活运用 数组中的 every 和 some 和 filter 方法 (来实现数据的过滤)3. Sublime的代码片段.sublime-snippet(类似于XCode里的Code Snippet)4. 不可见元素template的使用5. v-for ...
sync不生效 vue_Vue .sync修饰符与$emit(update:xxx)写法问题
weixin_36039533的博客
02-04 2065
问题描述最近在学习Vue，在学习自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果，具体如下使用.sync修饰符,即// this.$emit('update:father-num',100); //无效this.$emit('update:fatherNum',100); //有效//......&l...
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
10-15
本文通过一个demo给大家介绍了vue子组件改变父组件传递的prop值通过sync实现数据双向绑定,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
sync不生效 vue_浅析 Vue 中的 .sync 修饰符
weixin_39672296的博客
12-20 141
浅析 Vue 中的 .sync 修饰符 把学到知识快速转化为博客，然后忘掉它吧 ——怕猫的程序员Vue 中的 .sync 修饰符，是一个重要的语法糖，它可以快速实现组件间的通信 当我们需要做的只是让子组件改变父组件状态时，代码更容易区分 它会被扩展为一个自动更新父组件属性的 v-on 监听器下面看一个例子，例子中，子组件（Child）通过 $emit 去修改父组件（App）的 total，如果不适...
Vue.js——父子组件通信-子传父（自定义事件）——2020.11.27
weixin_43402353的博客
11-27 510
父子组件通信-子传父（自定义事件）一丶子级向父级传递二丶案例代码三丶运行结果——天生我材必有用，千金散尽还复来—— 一丶子级向父级传递 props用于父组件向子组件传递数据，还有一种比较常见的事子组件传递数据或事件到父组件中 我们需要用自定义事件来完成 什么时候需要自定义事件呢？ 当子组件需要向父组件传递数据时，就要用到自定义事件 v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件 自定义事件的流程： 在子组件中，通过$emit()来监听事件 在父组件中，通过v-on来监听子组件事
sync不能成功同步
weixin_33682790的博客
05-18 1470
[root@localhostbin]#./sync_ctrlstart startthesync_d.... startthesync_d0.... Target:sync_d0isrunningwithpid143899... startok [root@localhostbin]#./sync_ctrlstatus sync_d...
vue实现分页效果原生,升级为组件写法(两种)
x_xiNan9416的博客
09-21 325
需求: 实现分页通过组件传参 第一步:通过先不封装自己写出来效果(代码如下): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
vue中实现在子组件中刷新父组件
liyiliang123的博客
09-10 3708
一、首先是父组件，现在父组件中的子组件属性上添加监听事件，signStatusVerdict 二、其次是子组件，发射一个事件给父组件的监听属性 三、最后是父组件，父组件中监听到事件后会执行listenSignStatus方法，执行更新父组件列表操作 ...
记一个Vue官方文档中关于修饰符.sync的坑
sevenddddddd的博客
04-20 4803
Vue官方文档“组件”一栏中提到，Vue在2.0移除了.sync，又在2.3重新添加了它，但是采用了全新的内部逻辑：这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。只有在子组件中显式传递一个名为update:变量名的自定义事件，父组件的相应变量才会被更新。下面是坑：Vue官方文档中对于最新版的.sync修饰符的原理解释如下： 如下代码 <com
前端开发【vue开发技巧】日常总结
IT_Mr_wu的博客
09-11 772
vue开发技巧前端开发优雅更新propsprovide/inject小型状态管理器卸载watch观察自定义指令获取实例优雅注册插件自动化引入模块路由懒加载(动态chunkName) 前端开发 优雅更新props 更新 prop 在业务中是很常见的需求，但在子组件中不允许直接修改 prop，因为这种做法不符合单向数据流的原则，在开发模式下还会报出警告。因此大多数人会通过 $emit 触发自定义事件，在父组件中接收该事件的传值来更新 prop。 child.vue export defalut { pro
Vue的.sync修饰符的使用
weixin_34034670的博客
04-19 618
本篇文章主要介绍了如何理解Vue的.sync修饰符的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 <div id="app"> <div>{{bar}}</div> <my-comp :foo.sync="bar"></my-comp>`<br /> <!-- <my...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值