vue中的.sync有什么作用，该如何封装一个组件

已于 2023-07-24 16:44:03 修改
阅读量309 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-07-16 17:05:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55973411/article/details/131751592
版权

如果使用了.sync就说明子组件想要通过某种方式修改父组件的数据的值，比如element-ui中的Dialog弹框中有使用到

如果不将这个弹框单独封装一个组件的情况下这个是很友好的，就不用书写@close事件来关闭弹框了，代码量很大的情况下就需要将这个弹框单独封装成一个子组件

弹框的显示是由子组件里面的:visible来控制的，false隐藏，true显示，但是:visible是由showDialog来控制的，showDialog是由父组件传递过来的，归根结底，弹框的显示与隐藏还是由父组件控制的，子组件使用prop接收父组件传递过来的showDialog，但是由于props是单项数据流，弹框打开后想要关闭，需要将:visible设置为false，可是:visible是由父组件传递过来的变量控制的，子组件不能直接修改父组件传递过来的值，需要使用$emit事件传值让父组件自己修改，然而:visible使用.sync修饰的会自动在子组件中将showDialog设置为fasle就会报错

 这个报错的大概意思就是在Vue2中组件props中的数据只能单向流动，即只能从父组件通过组件的DOM属性attribute传递props给子组件，子组件只能被动接收父组件传递过来的数据，并且在子组件中，不能修改由父组件传来的props数据

正确做法是删掉:visible的.sync然后使用$emit来配合update事件来完成，固定写法是

this.$emit('update:showDialog', false)

其中的showDialog是props中的父组件传递过来的变量，false是将showDialog修改为false

父组件

说白了封装组件后就是谁的数据谁修改，但是.sync会自动让子组件修改父组件的值，这点要注意

lengfneg_hao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue使用.sync 实现父子组件的双向绑定数据问题
01-21
最近在vue 项目中有一个需求， 就是我需要根据不同的类型在页面中放不同的组件， 组件需要跟当前页面的数据进行双向绑定，如果都写在同一个页面 代码会显得比较多，毕竟我当前页面已经7-800行代码了 所以我需要把...
一个封装了vivus的vue组件能够播放svg路径动画
08-12
在这个场景中，我们讨论的是一个基于Vue.js的自定义组件，它整合了Vivus库，用于播放SVG路径动画。Vivus是一个轻量级的JavaScript库，能够使静态的SVG图形动起来，通过动态地绘制SVG路径来实现各种动画效果。 首先...
vue快速入门（三十九）.sync简化组件双向绑定（推荐）
最新发布
不起眼小菜菜的博客
04-22 634
注释很详细，直接上代码……
vue中.sync详解
weixin_44424820的博客
07-22 3036
白话理解：一个组件只能定义一个v-model，如果其他的prop也要实现双向数据绑定的效果，简单的方法就是：给子组件绑定一个自定义事件，父组件监听该事件，然后更新prop。但是这种方法又比较麻烦，官网解释：在有些情况下，我们可能需要对一个prop参数进行数据“双向数据绑定”。但是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且再父组件和子组件两侧都没有明显的变更来源。带有.sync修饰符的v-bind不能和表达式一起使用，只能传递你想绑定的属性名。就是被设计出来简化这种操作的。
Vue中 .sync 修饰符和v-model
weixin_43597801的博客
04-03 675
父组件将 message 的值传给子组件的，子组件中触发事件 update:xxx 需要修改父组件的 message，就可以用 .sync 修饰符简化( sync 操作符的时候。
vue2 .sync语法糖
每天都要努力学习哦~~
09-12 584
sync在 Vue 2 中，.sync语法糖是一个强大而方便的工具，用于实现父子组件之间的双向数据绑定。它可以大大简化代码，并使数据传递更加直观和易于理解。然而，在使用时需要注意一些约定和注意事项，以确保它能够正确地工作。希望这篇文章能够帮助你更好地理解和使用 Vue 2 中的.sync语法糖，提高。
sync修饰符-子组件修改父组件属性
Jay的个人博客
11-25 968
sync修饰符-子组件修改父组件属性
vue2 .sync修饰符
m0_73101944的博客
05-12 147
我们都知道，组件之间通过props 或者 $emit 传值都是单向数据流的。age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来。这时子组件触发了父组件的修改函数使父组件的age修改成了1234567。这里注意我们的事件名称被换成了<font color=red >update：是被固定的也就是vue为我们约定好的名称部分。这样就很简单的实现了，数据的双向流。这样就完成了，是不是感觉简单了很多。
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
vue-elem-app:基于vue2.3.x构建的elements外卖APP
05-28
运用了vue 2.3.x版本后添加的.sync语法糖 为商品选项卡中的滚动区添加了顶部固定效果,左侧菜单区也能根据用户在内容区的选择滚动相应位置 添加了一些较为巧妙的css布局处的注释 将一些还未被单独封装为组建的代码...
vue打开子组件弹窗都刷新功能的实现
10-14
在Vue中，通常会使用`el-dialog`这样的组件来创建弹窗，它是一个封装好的对话框组件，用于展示一些内容或者进行用户交互。当我们打开子组件弹窗时，如果希望弹窗内的数据或者状态能够更新，就需要正确地管理和更新...
vue中sync的使用
热门推荐
YuShiYue的博客
08-20 1万+
vue2.3.x: 以上是vue2.3.x时sync的用法,其实在平常的工作中我用到sync最多的场景一般是父子组件之间控制的dialog弹框的显示隐藏,其实看一下UI库的文档,比如element-ui的Dialog组件,它是支持sync属性 比如我们有一个list.vue <template> <div> <button @click="add">新增</button> <a-dialog :visible.sync="
Vue组件通信以及.sync修饰符的使用
qq_43403676的博客
05-22 989
本文主要介绍了Vue组件之间通信的两种最常用的方式，以及.sync的使用来简化父子组件之间的通信。
element-ui中的对话框中的visible.sync
give it a try
11-25 1262
:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏 后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。 ...
Vue组件传值.sync
weixin_59324977的博客
12-15 4637
传统的父子组件之间传值,父组件-->子组件 ----父组件(父组件会接收到子组件传回来的方法,并且对数据进行更改) <template> <div class="content"> <btn :btnName='num' @changeFn= changeFn></btn> </div> </template> ----子组件(用props接,但是子组件只有读的属性,不可以对数据进行更改,所以$emit.
.sync的使用（包括讲解props属性和$emit方法以及组件间通信传值）
weixin_44628177的博客
01-10 2416
vue组件间通信，父传子，子传父，同级传。.sync的使用，$emit和props全局事件总线的介绍
Vue中的sync属性修饰符（父子数据同步）
weixin_57677300的博客
01-30 859
属性修饰符sync父子组件数据同步的一种，和v-model差不多可以实现父子组件数据同步:money.sync,代表父组件给子组件传递props['money'],给当前子组件绑定一个自定义事件(update:money)
vue中dialog下修改弹框的visible的值之加.sync的区别
MISS_zhang_0110的博客
05-05 4103
比方说，elementui中的dialog组件，它有个prop 叫visible，在使用该组件的时候，我们希望点击dialog 右上角的x号，或者点击遮罩层，隐藏dialog。但是我们没法在子组件去直接修改父组件绑定visible属性的变量，按照规则，我们需要在dialog里。sync 修饰符其实是个双向绑定的语法糖，一般用于“双向绑定”props的时候，类似v-model。一个事件，然后在父组件的处理方法中去修改该值，但是这样写太麻烦了，因此，我们使用了。修饰符，然后约定子组件使用。
利用sync修饰符关闭新增弹层
wam923259736的博客
01-07 367
这里我们学习一个新的技巧，sync修饰符 按照常规，想要让父组件更新**showDialog**的话，需要这样做 // 子组件 this.$emit('changedialog', false) //触发事件 // 父组件 <addDialog @changedialog="method" :showDialog="showDialog" /> method(value) { this.showDialog = value } 但是，vuejs为我们提供了**sync修饰符**，它
vue封装一个弹窗组件
05-16
好的，下面是一个基本的弹窗组件封装代码。代码中使用的是Element UI库中的Dialog组件，你可以根据自己的需求进行修改和定制。 ``` <template> <el-dialog :title="title" :visible.sync="visible" :modal="modal" :width="width" :fullscreen="fullscreen" :lock-scroll="lockScroll" :custom-class="customClass" :show-close="showClose" :before-close="beforeClose" > <slot></slot> </el-dialog> </template> <script> export default { name: 'MyDialog', props: { title: { // 弹窗标题 type: String, default: '' }, visible: { // 是否显示弹窗 type: Boolean, default: false }, modal: { // 是否为模态弹窗 type: Boolean, default: true }, width: { // 弹窗宽度 type: String, default: '50%' }, fullscreen: { // 是否全屏显示 type: Boolean, default: false }, lockScroll: { // 是否锁定滚动条 type: Boolean, default: true }, customClass: { // 自定义类名 type: String, default: '' }, showClose: { // 是否显示关闭按钮 type: Boolean, default: true }, beforeClose: { // 关闭前的回调函数 type: Function, default: () => {} } } } </script> ``` 这是一个非常基础的弹窗组件，你可以根据自己的需求进行扩展和修改。在使用时，你需要在父组件中引入该组件，并使用v-model绑定visible属性来控制弹窗的显示和隐藏状态。 ``` <template> <div> <el-button @click="visible = true">打开弹窗</el-button> <my-dialog v-model="visible" title="弹窗标题"> <p>这是弹窗内容</p> </my-dialog> </div> </template> <script> import MyDialog from './MyDialog.vue' export default { components: { MyDialog }, data() { return { visible: false } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值