关于vue修饰符.sync

最新推荐文章于 2024-12-04 21:13:01 发布

原创最新推荐文章于 2024-12-04 21:13:01 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

本文详细解析了Vue框架中的单项数据流原理及如何通过.sync修饰符实现子组件与父组件之间的双向数据绑定。重点介绍了在子组件中如何使用this.$emit触发更新事件，以及父组件如何监听并响应这些事件。

vue是单项数据流，所以要对他进行双向数据绑定的时候需要用到.sync修饰符，最常用的是visible.sync
在子组件里写：this.$emit(‘update:visible’, visible)，使用update:my-prop-name 的模式触发事件
父组件里：

<components :visible="isVisible" @update:visible="val=>isVisible=val"></components>
//简写
<components :visible.sync="isVisible"></components>

子组件：

this.$emit('update:visible', visible)

作用

：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

番凪_BanNagi

关注关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue中的.sync修饰符详解

weixin_40682342的博客

06-30

194

sync修饰符是Vue提供的一种语法糖，用于简化父子组件之间的双向数据绑定，它在Vue 2.x中被广泛使用，但在Vue 3.x中其功能被整合到了v-model中。

修饰符.sync的用法

阿牛哥的博客

09-15

3016

修饰符.sync的用法

参与评论您还未登录，请先登录后发表或查看评论

使用了.sync修饰符，然后约定子组件使用$emit(‘update:visible‘,false)，让父组不用写处理方法就可以修改绑定visible属性的变量

aliven1的博客

10-28

2497

比方说，elementui中的dialog组件，它有个prop 叫visible，在使用该组件的时候，我们希望点击dialog 右上角的x号，或者点击遮罩层，隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量，按照规则，我们需要在dialog里。.sync 修饰符其实是个双向绑定的语法糖，一般用于“双向绑定”props的时候，类似v-model。一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了。修饰符，然后约定子组件使用。

组件的传参

m0_72474345的博客

10-20

283

【代码】组件的传参。

vue3+ts defineEmits update使用，v-model:visible 子组件传递数据给父组件

qq_42859450的博客

11-10

4778

vue3 defineEmits v-model:visible

[Vue]:visible.sync

m0_51955470的博客

11-20

2064

sync修饰符使得在控制对话框的显示和隐藏时更加智能，不仅控制显示，当用户关闭对话框时，isVisible会自动同步为false，而无需我们手动去更新这个值。这简化了代码并提升了可维护性。--* @Description: 登录组件--><template><el-dialog title="登录" width="300px" center :visible.sync="isLogin">

vue-cli中的:visible.sync是什么

qq_42459832的博客

02-20

1万+

在做项目是以为:visible.sync是elementUI中的学法，用来显示和隐藏一个弹框，其实这个是vue当中的一个写法。 :visible指的是属性绑定，表示弹框的显示隐藏，当：visible的值诶true时，弹框显示，当为false时，弹框隐藏。 sync指的是同步动态双向来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的是发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定原则。在vue中同一加上 .sync 来表示同

vue 之 .sync 修饰符示例详解

08-27

vue 之 .sync 修饰符示例详解在 Vue 框架中，`.sync` 修饰符是一个非常重要的概念，它主要用来实现父子组件之间的双向数据绑定。在本文中，我们将详细介绍 `.sync` 修饰符的相关知识，包括其原理、使用方法和注意...

如何理解Vue的.sync修饰符的使用

12-29

本文介绍了Vue的.sync修饰符的使用，分享给大家，也给自己留个笔记案例 <div>{{bar}} <my foo.sync=bar>  [removed] Vue.component('my-comp',...

vue .sync修饰符的使用详解

08-27

Vue .sync 修饰符的使用详解 Vue .sync 修饰符是一种特殊的修饰符，它可以实现父组件和子组件之间的双向绑定。该修饰符可以将子组件中的某个 prop 属性同步到父组件中，从而实现了父子组件之间的数据交互。在 Vue...

VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题

tangdou369098655的博客

05-14

1万+

VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景：父组件引用子组件 <child-dialog :visible="visible"><

:visible.sync 的作用

最新发布

m0_56146757的博客

12-04

1080

【代码】visible.sync的作用。

ElementUI中:visible.sync的使用

qq_50916380的博客

04-07

1837

例如自定义的AddOrUpdate组件通过addOrUpdateVisible的值为true和false来控制，那么必须在AddOrUpdate组件中使用visible.sync来同步值，保证visible.sync的值与addOrUpdateVisible的值相同来控制组件的显示与隐藏。在开发项目中，发现ElementUI中的对话框中使用了这个属性，想通过v-if控制组件的显示与隐藏时发现不能控制，后来发现了visible.sync，实现了组件的显示与隐藏。它用于在Vue组件中同步元素的可见性状态。

vue的.sync修饰符

kongduxue的专栏

01-11

355

<text-document v-bind:visible="visible" v-on:update:visible="visible = $event" ></text-document> <text-document v-bind:visible.sync="visible"></text-document> .sync 修饰过变量后可在组件内部使用方法直接更新 methods:{ change(){ this.$emit('up...

vue2.0修饰符sync用法

weixin_30861797的博客

08-10

156

如果子组件是一个弹窗，我们想通过点击关闭按钮来关闭子组件弹窗，子组件弹窗的v-show由变量isVisible控制，这个变量通过props由父组件来注入，而子组件无法改变props里面的变量的值，但可以通过sync修饰来实现，代码如下: 子组件： <button @click="close">关闭</button> export defa...

vue中.sync 修饰符

weixin_30337251的博客

12-14

949

　　一直以来，都不太明白.sync的用法，归根结底原因在于，没有仔细阅读“.sync修饰符”。　　正好，最近在拿一个项目练手，然后使用了elment-ui，然后在用到dialog的时候，属性visible是用来控制是否显示Dialog的，后面特意强调了支持.sync修饰符。　　所以，此时再次看到.sync修饰符，就会想到这个Dialog，那么必然不能放过了，正好好好研究一下.sync...

Element Ui 中的 :visible.sync

摸鱼大王的博客

08-13

8001

<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="90px"> <el-form-item label="测试岗位" prop="postName"> <el-inpu