vue sync
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的更多相关文章
- 深入理解vue 修饰符sync【 vue sync修饰符示例】
在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync .但是在 2.0 发 ...
- Vue sync修饰符的使用
父子组件传值,父组件可以给子组件传值,但是子组件是不能修改组件提供的值,这里vue提供了sync修饰符,以前父组件点击子组件显示,子组件关闭按钮,父组件再点击子组件就无法让子组件显示.因为子组件点击关 ...
- vue .sync修饰符
.sync 修饰符 对一个 prop 进行“双向绑定”时,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源. 那这个修饰符的原理是什么呢?其实还是vu ...
- vue .sync 修饰符和自定义v-model的使用
VUE 是单向数据流 当我们需要对一个 prop 进行"双向绑定"时 vue 修饰符.sync 子组件:this.$emit('update:visible', visible), ...
- Vue .sync修饰符与$emit(update:xxx)写法问题
在学习vue自定义事件的.sync修饰符实现改变数值时发现一个问题如下由于props的大小写命名:fatherNum,对应不同的$emit()会有不同的效果,具体如下: 使用.sync修饰符,即 // ...
- vue sync用法
1.父组件 <add-rule :show.sync="showEditDialog" :addOrUpdate="addOrUpdate" @close ...
- 理解vue 修饰符sync
也是在vux中看到了这个sync 现在我们来看看vue中的sync 我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移 ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...
- Vue一些重要的知识点
vue sync修饰(1)双向数据绑定,父子组件之间信息的交互 1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么 ...
随机推荐
- LINUX SHELL脚本攻略笔记[速查]
Linux Shell脚本攻略笔记[速查] 资源 shell script run shell script echo printf 环境变量和变量 pgrep shell数学运算 命令状态 文件描述 ...
- [atcoder002E] Candy Piles [博弈论]
题面: 传送门 思路: 每一堆糖排成一列,所有列横着放,形成一个阶梯型 两个决策相当于左边一列去掉和最下面一行去掉 那么这个模型可以转化为同样形状的网格图,向左上方走,走到边界的赢· 然后一波数学推导 ...
- BZOJ3998 [TJOI2015]弦论 【后缀自动机】
题目 对于一个给定长度为N的字符串,求它的第K小子串是什么. 输入格式 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个.T=1则表示不同位置 ...
- SPOJ - SUBLEX 【后缀自动机】
题目 求第K小子串 题解 建好SAM后,拓扑排序,反向传递后面所形成的串的数量 最后从根开始,按照儿子形成串的数量与k比较走就好了 #include<iostream> #include& ...
- 【07】node 之 Buffer
1.1. Buffer基本概念 JavaScript 语言自身只有字符串数据类型,没有二进制数据类型.二进制可以存储电脑中任何数据(比如:一段文本.一张图片.一个硬盘,应该说电脑中所有的数据都是二进 ...
- 使用 swagger组件给asp.net webapi文档生成
1.名词解释 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模 ...
- SQL统计,重复字段只算一次
原文发布时间为:2010-08-07 -- 来源于本人的百度文章 [由搬家工具导入] master数据库为例: COUNT(EXPRESSION)一个字段重复,则只算一次:SELECT COUNT(D ...
- JavaScript正则表达
Javascript 与正则表达式 一.正则表达式(regular expression简称res) 1.定义: 一个正则表达式就是由普通字符以及特殊字符(称为元字符)组成的文字模式.该模式描述在查找 ...
- springBoot 环境
环境约束 jdk1.8:Spring Boot 推荐jdk1.7及以上:maven3.x:maven 3.3以上版本:Apache Maven 3.3.9.IntelliJIDEA2017:Intel ...
- Java 获取指定日期的方法总结
原文地址:http://bdcwl.blog.163.com/blog/static/765222652009104171521/ SimpleDateFormat sdf = new SimpleD ...