如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入,

而子组件无法改变props里面的变量的值,但可以通过sync修饰来实现,代码如下:

子组件:

<button @click="close">关闭</button>
    export default {
props: {
isVisible: {
type: Boolean,
default: false
}
},
methods: {
close () {
this.$emit('update:isVisible', false);
}
}
};

父组件:

<chlid-component :isVisible.sync="isVisible"></chlid-component>

vue2.0修饰符sync用法的更多相关文章

  1. 理解vue 修饰符sync

    也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...

  2. 深入理解vue 修饰符sync

    [ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...

  3. 深入理解vue 修饰符sync【 vue sync修饰符示例】

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...

  4. vue 修饰符sync

    从 Vue 2.3.0 起,重新引入了 .sync 修饰符,作为一个编译时的语法糖存在.它会被扩展为一个自动更新父组件属性的 v-on 监听器. 实例: 父组件:<syTree :refillD ...

  5. const 和 readonly 修饰符的用法

    1. 只有C#内置类型(int,double,long等)可以声明为const;结果.类和数组不能声明为const. 2. readonly 是在字段上使用的修饰符,直接以类名.字段访问. 3. co ...

  6. C#中const 和 readonly 修饰符的用法详解

    1.const是不变常量,在编译的时候就需要有确定的值,只能用于数值和字符串,或者引用类型只能为null.(这里为什么要把字符串单独拿出来?是因为字符串string是引用类型,但是使用的时候却感觉是值 ...

  7. params修饰符的用法

    params修饰符是用来声明参数数组允许向方法传递数量不定的自变量用的.事实上System.Console 类的 Write 和 WriteLine 方法是参数数组用法的典型示例.他们的声明方式如下: ...

  8. java中修饰符及其用法

    1. java中的修饰符 a. 权限修饰符 private,默认的,protected,public b. 状态修饰符 static,final c. 抽象修饰符 abstract 2. 类修饰符 p ...

  9. Vue 修饰符sync的应用

    官方链接 https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符 这个解释有点不太直观,用代码解释一下 父组件 v-b ...

随机推荐

  1. Javascirpt 常见的误区

    var foo = new Object(); var bar = new Object(); var map = new Object(); map[foo] = "foo"; ...

  2. 使用 console.time() 计算js代码执行时间

    console.time('hellor'); for(var i=0;i<100000;i++){} console.timeEnd('hellor');

  3. DRBD 数据镜像软件

    1>DRBD介绍 1>数据镜像软件DRBD介绍  分布式块设备复制(Distributed Relicated Block Deivce,DRBD),是一种基于软件.基于网络的块复制存储解 ...

  4. 17、Semantic-UI之分页插件

      在很多的前端开发框架中都会有提供分页插件,但是分页插件的使用如果手动编写还是比较复杂的.使用Semantic-UI中的分页插件更加简单方便.分页插件的使用必须要和后台结合. 示例:定义分页插件 & ...

  5. CSS float与clear & 替换元素与非替换元素

    css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...

  6. 20145233《网络对抗》Exp8 Web基础

    20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...

  7. SELinux导致无法访问外网,PHP连接MySQL异常Can't connect to MySQL server、redis程序访问提示Redis server went away的解决方法

    今天上班遇到的问题,新配的Linux服务器,php.Apache和一系列扩展插件装好后,在本地好好的程序移上去就一直抱数据库连接错误,而用sql命令却能连接上去, 做了一个简单的判断数据库连接页面还是 ...

  8. 模仿w3c school的示例导航栏

    近日学习HTML,恰巧学习过程中看见w3cschool的示例导航栏看上去很不错,适合新手练习,于是模仿着做了一个. 示例导航栏如下图所示 导航栏自然使用li标签来做,a标签控制背景颜色和鼠标放入的特效 ...

  9. 微信开发之c#下缓存jssdk的access_token

    因为access_token的寿命只有7200秒,每日获取access_token存在上限,所以在获取access_token后,需要将其缓存起来. 首先建立一个模型 public class Acc ...

  10. ES6——数据结构Set

    数据结构 Set 集合的基本概念: 集合是由一组无序且唯一(即不能重复)的xiang组成的.这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中. 特点: key和 value 相同, ...