如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的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. 设计模式11---组合模式(Composite Pattern)

    一.组合模式定义 将对象组合成树形结构以表示“部分-整体”的层次结构,使得用户对单个对象和组合对象的使用具有一致性.Compose objects into tree structures to re ...

  2. UniCode编码表及部分不可见字符过滤方案

    Unicode编码表/0000-0FFF 图例: Unicode 3.1 Unicode 1.0 Unicode 3.2 Unicode 1.1 Unicode 4.0 Unicode 2.0 Uni ...

  3. jQuery基础入门

    一.什么是 jQuery Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器.供你快速定位到需要操作的元素上面去.还提供了很多便捷的方法. ...

  4. word2010多级列表编号为什么会变成黑块

    把光标放置在黑块的后面 在键盘上按左方向键,则黑块变灰色(为选中状态) 然后ctrl+shift+s, 出现窗口“apply styles" 点击"reapply", 搞 ...

  5. xshell无法连接Ubuntu的解决办法

    使用workstations14安装完Ubunu后,网络连接方式为NAT模式(N):用于共享主机的IP地址 此时想用xshell连接此虚拟机但是提示连接失败,但是宿主机和虚拟机互相都能ping通,且虚 ...

  6. java 编译器级别与项目版本不匹配

    java compiler level does not match the v examime.      java 编译器级别与项目版本不匹配. 解决:      在当前项目上点右键,属性 Pro ...

  7. 【题解】 [NOI1999]生日蛋糕

    题面 传送门 Solution 搜索每一层的半径和高度,然后加入一些剪枝就好了. #include<stdio.h> #include<stdlib.h> #include&l ...

  8. nowcoder(牛客网)提高组模拟赛第一场 解题报告

    T1 中位数(二分) 这个题是一个二分(听说是上周atcoder beginner contest的D题???) 我们可以开一个数组b存a,sort然后二分b进行check(从后往前直接遍历check ...

  9. HDU - 6215 2017 ACM/ICPC Asia Regional Qingdao Online J - Brute Force Sorting

    Brute Force Sorting Time Limit: 1 Sec  Memory Limit: 128 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...

  10. JS 性别选择

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...