:visible.sync 的作用详解

2025-09-23 14:35:45

我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，

特别是在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync

<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>需要注意的是内容是默认不居中的</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false
      };
    }
  };
</script>

:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏

后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：

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

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。例如：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

<text-document v-bind:title.sync="doc.title"></text-document>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

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

<text-document v-bind.sync="doc"></text-document>

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

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

vue官网：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

到此这篇关于:visible.sync 的作用的文章就介绍到这了,更多相关:visible.sync 的作用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue .sync修饰符的使用详解

vue的官网介绍非常不错,先通读一遍. 2.3.0+ 新增在有些情况下,我们可能需要对一个 prop 进行"双向绑定".不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之.举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图: this.$emit('update:title', newTi
详解vue中async-await的使用误区

曾经见过为了让钩子函数的异步代码可以同步执行,而对钩子函数使用async/await,就好像下面的代码: // exp-01 export default { async created() { const timeKey = 'cost'; console.time(timeKey); console.log('start created'); this.list = await this.getList(); console.log(this.list); console.log('end
vue 使用async写数字动态加载效果案例

父组件 <interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number> import IntervalNumber from './IntervalNumber.vue' components:{ IntervalNumber, } 子组件 <template> <span class="Interv
详解Vue的sync修饰符

1 .指令指令即 Directive,从字面意思理解就是我告诉你要做什么,就是发送了一个指令,然后由接收指令的人去做就好了.在 Vue 中的指令有个统一好认的格式,就是以 v- 开头的就是指令,如: <div v-text="x"> </div> //v-text指定标签文本指令 <div v-on:click="add"> <div> //v-on事件绑定指令但并不是所有的指令都以 v- 开头,对于一些简写,也是
vue中v-model指令与.sync修饰符的区别详解

目录 v-model .sync 细微之处的区别总结功能作用场景: v-model  <template>  <Child v-model="model"></Child>   <Ch
vue-cli中的:visible.sync是什么意思

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

我们在前端开发中经常看到:visible.sync这种修饰符,很多人不知道这是干什么的, 特别是在使用ElementUI的时候,里面有个弹窗el-dialog组件的时候会有用到:visible.sync <el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :vi
Golang之sync.Pool使用详解

前言我们通常用 Golang 来开发并构建高并发场景下的服务,但是由于 Golang 内建的GC机制多少会影响服务的性能,因此,为了减少频繁GC,Golang提供了对象重用的机制,也就是使用sync.Pool构建对象池. sync.Pool介绍首先sync.Pool是可伸缩的临时对象池,也是并发安全的.其可伸缩的大小会受限于内存的大小,可以理解为是一个存放可重用对象的容器.sync.Pool设计的目的就是用于存放已经分配的但是暂时又不用的对象,而且在需要用到的时候,可以直接从该pool中取.
Mysql中explain作用详解

一.MYSQL的索引索引(Index):帮助Mysql高效获取数据的一种数据结构.用于提高查找效率,可以比作字典.可以简单理解为排好序的快速查找的数据结构. 索引的作用:便于查询和排序(所以添加索引会影响where 语句与 order by 排序语句). 在数据之外,数据库还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用数据.这样就可以在这些数据结构上实现高级查找算法.这些数据结构就是索引. 索引本身也很大,不可能全部存储在内存中,所以索引往往以索引文件的形式存储在磁盘上. 我们
bootstrap中的 form表单属性role="form"的作用详解

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c
JavaScript中闭包的写法和作用详解

1.什么是闭包闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )

PHP中有eAccelerator.memcached.xcache.APC 4个加速.缓存扩展,下面给大家介绍下其区别,一起看看吧! 折腾VPS的朋友,在安装好LNMP等Web运行环境后都会选择一些缓存扩展安装以提高PHP运行速度,常被人介绍的有 eAccelerator.memcached.xcache.Alternative PHP Cache这几个缓存扩展,它们之间有什么区别?分别的作用又是什么?我们如何选择?这是本文给于大家的答案. 1.eAccelerator eAccelerato
ssm框架下web项目,web.xml配置文件的作用(详解)

1. web.xml中配置了CharacterEncodingFilter,配置这个是拦截所有的资源并设置好编号格式. encoding设置成utf-8就相当于request.setCharacterEncoding("UTF-8"); foreEncoding设置成true就相当于response.setCharacterEncoding("UTF-8"); <filter> <filter-name>CharacterEncodingFi
Python中__init__.py文件的作用详解

__init__.py 文件的作用是将文件夹变为一个Python模块,Python 中的每个模块的包中,都有__init__.py 文件. 通常__init__.py 文件为空,但是我们还可以为它增加其他的功能.我们在导入一个包时,实际上是导入了它的__init__.py文件.这样我们可以在__init__.py文件中批量导入我们所需要的模块,而不再需要一个一个的导入. # package # __init__.py import re import urllib import sys impo
关于break和continue以及label的区别和作用(详解)

break和continue的区别和作用: break用于完全结束一个循环[一般只退出一重循环],跳出循环体执行循环后面的语句 continue是跳过当次循环中剩下的语句,执行下一次循环. 标号label 标号提供了一种简单的break语句所不能实现的控制循环的方法,当在循环语句中碰到break时, 不管其它控制变量,都会终止.但是,当你嵌套在几层循环中想退出循环时又怎么办呢?break只退出一重循环, 但你可以用标号label标出你想退出哪一个语句.规定标号label必需放在循环之前(意味着循
对Python模块导入时全局变量__all__的作用详解

Python中一个py文件就是一个模块,"__all__"变量是一个特殊的变量,可以在py文件中,也可以在包的__init__.py中出现. 1.在普通模块中使用时,表示一个模块中允许哪些属性可以被导入到别的模块中, 如:全局变量,函数,类.如下,test1.py和main.py test1.py __all__=["test"] def test(): print('----test-----') def test1(): print('----test1----

:visible.sync 的作用详解

相关推荐

随机推荐