Vue父子组件传值之.sync

最新推荐文章于 2024-08-23 12:25:46 发布
最新推荐文章于 2024-08-23 12:25:46 发布
阅读量1.8k 收藏 5
点赞数
分类专栏： 前端学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845044/article/details/106588774
版权
本文介绍了Vue中使用.sync修饰符进行父子组件通信的方法，详细阐述了如何通过事件和属性来实现数据的双向绑定。内容包括声明props、触发事件、监听事件以及使用.vbind.sync简化操作。同时提醒了.sync后面不能接表达式，需要通过计算属性处理，以及如何一次性传递多个值。并分享了一个实验沙盒链接，展示了具体的代码示例。
摘要由CSDN通过智能技术生成

首先，讲讲.sync的来历，在项目中常有父子组件传值，子组件修改父组件数据的需求，而Vue是不允许子组件直接修改操作的，直接红牌警告：

于是乎，有了以下操作：

  1. 子组件在props中声明，与父组件商量好的传值暗号xxx（用来作为传递值的别名）
  2. 子组件通过触发一个事件来告诉父组件：“我要改xxx对应的值！”（this.$emit('update: value', this.xxx=yyy)）
  3. 父组件在引用子组件时，在其标签内通过:xxx='local_value' @update:value='local_value = $event'来监听update:value事件，对更改请求作出响应
  4. local_value的值更改为yyy

这是我的实验沙盒链接，可以点击进来看看完整代码
例子中，msg对应xxx，parent对应local_value，update:value其实是一个字符串，只要父子组件对应即可，不强制要求，但官方建议写为’update:value’，大概是为了语义性吧~

而.sync是用来简化第3步操作的：:xxx.sync =

最低0.47元/天 解锁文章
我要你好好的。
关注
专栏目录
VUE父子传值非父子传值（组件通信：详解vue传值）
前端程序猿的博客
12-29 810
vue的组件传值详解以及例子
[Vue的组件通讯.sync修饰]Vue中.sync的使用方法和实现的方式 代码注释
preserveXing的博客
02-15 1474
.sync的使用方法 1. 在父组件中，将需要传递给子组件的数据使用v-bind绑定到子组件的props中，并在属性名后加上.sync修饰符，如下所示： 2. 在子组件中，将需要传递给父组件的数据使用$emit方法触发一个名为update:value的事件，并将新的值作为参数传递给父组件，如下所示： .sync的实现方式 .sync修饰符的实现方式是通过Vue.js提供的语法糖实现的，即将一个prop转换为一个自定义事件。具体来说，当使用.sync修饰符时，Vue.js会自动将v-bind:prop转换为:
关于vue的父子组件传值问题
Call_me_small_pure的博客
04-09 1005
创建三个vue组件——index.vue(父组件)，son1.vue(子组件)，son2.vue(子组件)在router文件设置好父组件路径（子组件不用设置路由）； 父子组件之间的页面转换是不通过路由的 父组件传递数据给子组件使用，遇到业务逻辑操作时子组件触发父组件的自定义事件。this.$parent此方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过
Vue第 8 篇，Vue中的父子闭环和.sync修饰符（父传子，在子组件中修改父组件状态和.sync修饰符）
weixin_65793170的博客
11-24 610
⭐Vue.js遵循“单向数据流”的原则，这意味着数据应该从父组件向下流动到子组件，而子组件不应该直接修改父组件的数据。然而，在某些情况下，你可能需要子组件能够影响父组件的状态，这就形成了所谓的“闭环”。
vue数据同步（sync修饰符）
最新发布
weixin_62639453的博客
08-23 751
本文描述的数据同步，是基于父子组件进行传递的参数实现。实现的内容是：子组件里面选择框，选择的对象可以传递给父组件，但一般涉及到子传父，可能会考虑使用$emit然后通过在父组件身上绑定一个自定义方法，通过子组件去emit触发这个事件，传递参数,但是这里不使用这种，新学了一种，数据同步的方式，也就是在子组件选择的数据，可以同步在父组件中。随便在父组件其他地方绑定一个事件，看看有没有获取到从子组件里面获取到的值，因为要拿选择的值过来父组件这边使用。被执行时，父组件会自动接收到这个事件并更新。
父子组件通信方法.sync
tan_xiao_tan的博客
03-07 392
子组件向父组件传参: 父组件 <Child @change='handle'/>只要子组件发生变化就会调用handle函数触发,然后把handle这个函数的数据更新成自己的数据 methods:{ handle(count){ this.count=count } } 子组件 methods:{ get(){ //触发自定义事件,把数据传递给父组件 this.$emit('change',res.data) } } .sync数据修饰符 父组件向子组件传递数据 (方法一:)
vue父子组件传值.sync语法糖
十年树人的博客
04-11 2628
vue，uniapp中父子组件传值，ref，.sync语法糖，props类型
父子组件传参 关于 .sync修饰符等用法
weixin_46873254的博客
09-17 984
父子组件传参 关于 .sync修饰符等用法单向数据流讲解Vue2.x使用定义事件的形式, 通知父组件修改.sync 和 update: 的使用父传子, 传递多个数据的简写采用v-model简写(要求严格)Vue3.x使用普通用法简写 单向数据流讲解 单向数据流（堆可以修改，栈不可修改） 我们都知道, 父传子的数据, 是单向数据流, 即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是: `基本数据类型不可修改，复杂数据类型不要修改引用地址（栈），它的值可以随便修改 Vue2.x
【学习记录】vue中.sync用法
无八哥
09-19 338
父组件给子组件传值时，子组件可以同步修改父组件中的数据。
vue组件传值的12种方法
土豆的博客
08-25 1505
props $emit .sync v-model ref $children / $parent $attrs / $listeners provide / inject EventBus Vuex $root slot
Vue:父子组件传值props、sync、v-model
weixin_55225560的博客
10-13 530
在vue中父子组件中传值 示例中： 1. 父组件Father向子组件Son传值（num：100） 2. 子组件Son点击修改按钮，需要修改接收父组件的传值，vue是单向数据流不允许直接修改接收的值。因此通知父组件Father去修改num值。props单向数据流 1. 父子组件props传值： 父组件： <template> <div> 父组件：{{ num }} <Son :value="num" @change="c.
Vue子组件给父组件传值以及sync语法糖使用
王景清的博客
03-04 625
不使用sync语法糖 父组件 <drawPlanInfoDialog :drawPlanInfoDialogVisible="drawPlanInfoDialogVisible" @update:drawPlanInfoDialogVisible="closeDialog" > </drawPlanInfoDialog> export default { method: { closeDialog(newVal) { this.draw
vue的sync语法糖的使用（组件父子传值）
HD243608836的博客
09-26 383
不是说不可以修改父组件传递到子组件的值吗?有些时候子组件需要修改父组件传递过来的prop，要去改变父组件的状态的时候就需要使用aync。正常情况下，确实不可以去修改父组件传递给子组件中的值！但是有些时候我们又需要去修改父组件传递给子组件中的值，我们可以这样来做？它可以去更新父组件中的ishow,将它的值更改为false。有的同学会说：我不使用sync可以更改吗？sync修饰符可以双向绑定父子组件中的数据。点击子组件的按钮，也将子组件隐藏。点击父组件的按钮，隐藏子组件。我们的子组件中有这样一行代码。
.sync详细理解和父子组件传值方法
Haley6的博客
03-13 1363
.sync使用 sync是vue中用于实现简单的“双向绑定”的语法糖，在平时的开发中是非常使用的。 vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决 一个组件上只能定义一个v-model，如果其他prop也要实现双向绑定的效果该怎么办呢？ 简单的方法是子组件向父组件发送一个事件，父组件监听该事件，然后更新prop 例如 <!-- 一个组件上只能定义一个v-mo
【Vue】.sync 修饰符的用法
sparks42的博客
05-11 186
如果想给子组件一个初始的值。然后想在它更新时拿到最新的值。一般就用.sync 比如弹窗的关闭事件可以这样写： 父组件： <xxxDialog :show.sync="xxxVisible"></xxxDialog> 弹窗组件： close(){ this.$emit('update:show', false) } ...
vue开发技巧之.sync
weixin_63305031的博客
11-13 868
在实际开发过程中，难免遇到父子组件套用，父组件向子组件传值，子组件需要修改父组件传递进来的值。当然，vue也会给你出现如下的报错（避免直接更改属性，因为只要父组件重新渲染，该值就会被覆盖。在这种解决子修改父组件传递的值的思路中，会有一个隐患，就是，你每传过去一个值，绑定需要一行，监听需要一行，那么就是两行代码，如果传两个呢，三个呢，四个呢，就会使父组件中代码变得很长。相当于给props开启了双向数据绑定。解决这个问题的方法是，在子组件的回调函数中派发一个自定义事件，然后在父组件中监听事件。
Vue中 子组件向父组件传值 及 .sync 修饰符 详解
明天也要努力的博客
05-08 4428
我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分，从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 ...
vue sync修饰符的使用
pixle的博客
10-30 173
1.主要用途：因组件内无法直接修改prop属性，要想改变prop常规做法需要emit通知父组件修改，sync提供了一种糖语法简写方式，可自动修改prop属性无需在父组件内监听emit事件做响应修改 2.常用例子：弹窗的显示关闭控制 3.使用方法提炼： xxx.sync, $emit(‘update:xxx’); （其中xxx为prop属性） 下面以popup弹窗为例子： 实现点击黑色空白区域自动关闭 子组件popup.vue <template> <div v-show="show
.sync修饰符传递参数
yezi153的博客
11-29 710
1..sync修饰符在父子组件之间传值可以传多个 2.传值方式:属性名.sync=“属性名" 前一个名字是传递之后子组件接收时的名字，后一个是传递的参数的属性名 3.怎么修改父组件传递给子组件的数据，通知父组件修改监听父组件的update事件 父组件传递数据和修改自己内部的数据 通知父组件要修改数据 ...
Vue父子组件传值与slot技巧详解
在Vue.js中，父子组件之间的通信与传值是开发过程中常见的需求。本文将重点讲解如何在父子组件间正确进行数据传递以及利用slot功能进行灵活布局。首先，我们来看父子组件的传值方法。 1. **父子组件传值**： 在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值