vue中.sync修饰符,实现子组件实时更新父组件的值
vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。
不过它有一个前身,先来看看.sync出现之前是如何实现的
父组件中(传递给子组件一个值:propObj)
<template>
<div>
<Lala :propObj="lalala"
v-on:update:propObj="lalala = $event"
></Lala>
</div> </template> <script>
import Lala from '@/components/lala.vue'; export default {
components:{
Lala
},
data(){
return {
lalala:{name:"哈哈"},
}
}
}
</script>
子组件中(点击事件去更新父组件的值)
<template>
<div><el-button @click="dd()">自定义组件内的按钮</el-button>
</div>
</template> <script>
export default {
props:['propObj'],//外部传值
methods:{
dd(){
if(this.propObj.name==2){
this.propObj.name="哈哈";
this.$emit('update:propObj', this.propObj)
}else{
this.propObj.name=2;
this.$emit('update:propObj', this.propObj)
} }
}
}
</script>
下面用vue 修饰符sync来实现,会更简洁
父组件中
<template>
<div>
<Lala v-bind:propObj.sync="lalala"></Lala>
</div> </template> <script>
import Lala from '@/components/lala.vue'; export default {
components:{
Lala
},
data(){
return {
lalala:{name:"哈哈"},
}
}
}
</script>
子组件中保持不变
vue中.sync修饰符,实现子组件实时更新父组件的值的更多相关文章
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- Vue中.sync修饰符
Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue的.sync 修饰符
很多时候,我们会对 prop (父子组件传递数据的属性) 进行“双向绑定” 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会 ...
- 027——VUE中事件修饰符:stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE中事件修饰符:stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- BZOJ3998 TJOI2015弦论(后缀自动机)
先考虑相同子串视为一个.按SAM的拓扑序预处理出从每个节点开始能得到多少个本质不同子串(注意虽然一个节点对应多个子串,但到达该点时当前的子串显然是确定为其中一个的),然后按位贪心即可. 相同子串视为多 ...
- css line-height & 图片底部间隙的处理
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里 . line-height 的学习 line-heigh ...
- 使用swagger在netcorewebapi项目中自动生成文档
一.背景 随着前后端分离模式大行其道,我们需要将后端接口撰写成文档提供给前端,前端可以查看我们的接口,并测试,提高我们的开发效率,减少无效的沟通.在此情况下,通过代码自动生成文档,这种需求应运而生,s ...
- springboot启动流程(十一)aop切面处理过程
所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 spring的两大核心就是ioc和aop.在关于ioc依赖注入的文章中,我们了解了如何根 ...
- DOM树节点关系
DOM是JS中专门操作HTML页面内容的 他的三种基本使用方法是: 1. document.getElementById(''): ——>选取html页面中带有Id的属性名: 2.docum ...
- Vue中遍历数组的新方法
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ ...
- javascript经常用到的函数
trim函数: trim() lTrim() rTrim()校验字符串是否为空: checkIsNotEmpty(str ...
- .tar.gz文件和.tar.xz文件的解压和压缩
1,.tar文件 tar -cvf 压缩 tar -xvf 解压 例如: tar -xvf mysql-8.0.16-linux-glibc2.12-x86_64.tar 2,.xz文件 xz ...
- win中使用curl上传文件报错
今天晚上复现“WordPress插件Easy WP SMTP反序列化漏洞”时,需要使用curl上传文件,我又用的windows环境,一直出错 curl: (26) couldn't open file ...
- pytorch训练模型的一些坑
1. 图像读取 opencv的python和c++读取的图像结果不一致,是因为python和c++采用的opencv版本不一样,从而使用的解码库不同,导致读取的结果不同. 详细内容参考:https:/ ...