如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的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. WebService搭建

    好久没有用WebService了,今天想复习一下原来的技术,结果错误百出. 这几天重装了系统,所有的东西都要重新配置,导致了很多原来没有发生过的问题,在这里做个笔记,希望以后不会再有这样的错误.

  2. 正则表达式(javascript)

    在开发过程中要要把一个css中的平移的x,y提取出来 ,正好把正则表达式学习了一下 'fsdfsdfsdf300pxfdsfd200pxfsdfsdf100px'  找出里面 px前面的数字: 经查资 ...

  3. 浅谈tcp_nodelay的作用

    今天在用nginx作web缓存的时候,发现在http里加入这样个参数,能有效的提高数据的实时响应性,那就是tcp_nodelay.下面我们来说说tcp_nodelay的原理: TCP_NODELAY和 ...

  4. Using Lucene's new QueryParser framework in Solr

    Sometime back, I described how I built (among other things) a custom Solr QParser plugin to handle P ...

  5. wc项目记录

    1.Github项目地址:https://github.com/3116004700/ruanjiangongcheng 2.预估时间见PSP表格. 3.解题思路描述: 在看到这个项目的时候我就想到了 ...

  6. Mathcad操作tips:函数、符号计算

    函数 1. 利用“:”进行函数定义,如 2. 函数支持range variable输入,如 3. 常用数学函数可以在Insert - Function菜单中寻得. 4. 当不确定某个名字是否是函数名时 ...

  7. leetcode 有效的数独

    判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...

  8. ZKEACMS 的两种发布方式

    前言 如果你还不知道ZKEACMS,不妨先了解一下. ASP.NET MVC 开源建站系统 ZKEACMS 推荐,从此网站“拼”起来 官方地址:http://www.zkea.net/zkeacms ...

  9. LightOJ 1094 - Farthest Nodes in a Tree

    http://lightoj.com/volume_showproblem.php?problem=1094 树的直径是指树的最长简单路. 求法: 两遍BFS :先任选一个起点BFS找到最长路的终点, ...

  10. Pycharm中安装Pygame并写第一个程序

    第一步:打开Pycharm 第二步:点File ->Default Settings->Project Interpreter->点加号 第三步: 搜索Pygame->Inst ...