1、使用vue cli建立工程

2、在APP.vue中:

<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>`,
props: ['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //触发 input 事件,并传入新值
}
}
})
export default {
data() {
return {
valueChild: true,
}
},
methods: {
changeValue() {
this.valueChild = !this.valueChild
}
}
}
</script>

3、效果:

4、结论

sync的作用是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。

vue sync的更多相关文章

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

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

  2. Vue sync修饰符的使用

    父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...

  3. vue .sync修饰符

    .sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...

  4. vue .sync 修饰符和自定义v-model的使用

    VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...

  5. Vue .sync修饰符与$emit(update:xxx)写法问题

    在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...

  6. vue sync用法

    1.父组件 <add-rule :show.sync="showEditDialog" :addOrUpdate="addOrUpdate" @close ...

  7. 理解vue 修饰符sync

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

  8. 深入理解vue 修饰符sync

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

  9. Vue一些重要的知识点

    vue sync修饰(1)双向数据绑定,父子组件之间信息的交互 1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么 ...

随机推荐

  1. LINUX SHELL脚本攻略笔记[速查]

    Linux Shell脚本攻略笔记[速查] 资源 shell script run shell script echo printf 环境变量和变量 pgrep shell数学运算 命令状态 文件描述 ...

  2. [atcoder002E] Candy Piles [博弈论]

    题面: 传送门 思路: 每一堆糖排成一列,所有列横着放,形成一个阶梯型 两个决策相当于左边一列去掉和最下面一行去掉 那么这个模型可以转化为同样形状的网格图,向左上方走,走到边界的赢· 然后一波数学推导 ...

  3. BZOJ3998 [TJOI2015]弦论 【后缀自动机】

    题目 对于一个给定长度为N的字符串,求它的第K小子串是什么. 输入格式 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个.T=1则表示不同位置 ...

  4. SPOJ - SUBLEX 【后缀自动机】

    题目 求第K小子串 题解 建好SAM后,拓扑排序,反向传递后面所形成的串的数量 最后从根开始,按照儿子形成串的数量与k比较走就好了 #include<iostream> #include& ...

  5. 【07】node 之 Buffer

    1.1.  Buffer基本概念 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.二进制可以存储电脑中任何数据(比如:一段文本.一张图片.一个硬盘,应该说电脑中所有的数据都是二进 ...

  6. 使用 swagger组件给asp.net webapi文档生成

    1.名词解释 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模 ...

  7. SQL统计,重复字段只算一次

    原文发布时间为:2010-08-07 -- 来源于本人的百度文章 [由搬家工具导入] master数据库为例: COUNT(EXPRESSION)一个字段重复,则只算一次:SELECT COUNT(D ...

  8. JavaScript正则表达

    Javascript 与正则表达式 一.正则表达式(regular expression简称res) 1.定义: 一个正则表达式就是由普通字符以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找 ...

  9. springBoot 环境

    环境约束 jdk1.8:Spring Boot 推荐jdk1.7及以上:maven3.x:maven 3.3以上版本:Apache Maven 3.3.9.IntelliJIDEA2017:Intel ...

  10. Java 获取指定日期的方法总结

    原文地址:http://bdcwl.blog.163.com/blog/static/765222652009104171521/ SimpleDateFormat sdf = new SimpleD ...