vue子传父关于.sync与$emit的实现


Posted in Javascript onNovember 05, 2019

$emit(update: prop, "newPropVulue") 这个模式,使子组件向父组件传达:更新属性,并抛出新的属性值
.sync 修饰符 是父组件中修改prop值得修饰符

一:什么地方需要用到.sync修饰符呢

当子传父,父级有两数据,而没有v-modal时

例如iview的Tree组件中:

父级:

<folder-tree
 :folder-list.sync="folderList"
 :file-list.sync="fileList"
 :folder-drop="folderDrop"
 :file-drop="fileDrop"
 :beforDelete="beforeDelete"
/>
import FolderTree from '_c/folder-tree'
export default {
 components: {
  FolderTree
 },
 }

子级:

<Tree :data="folderTree" :render="renderFunc"></Tree>

子级方法中的写法:

let updateListName = isFolder ? 'folderList' : 'fileList'
 this.$emit(`update:${updateListName}`, list)

二:.sync与$emit的写法问题

使用.sync修饰符,即

// this.$emit('update:folder-tree',100); //无效
this.$emit('update:folderTree',100); //有效
//......
<folder-tree v-bind:folder-tree.sync="test"></folder-tree>

与不使用.sync,即

this.$emit('update:folder-tree',100); //有效
//this.$emit('update:folderTree',100); // 无效
 
 //......
 <folderTree v-bind:father-num="test" v-on:update:folder-tree="test=$event" ></folderTree>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
RequireJS用法简单示例
Aug 20 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 #Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 #Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 #Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 #Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 #Javascript
vue 实现路由跳转时更改页面title
Nov 05 #Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 #Javascript
You might like
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
php 错误处理经验分享
2011/10/11 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
简单了解python变量的作用域
2019/07/30 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
工作保证书范文
2014/04/29 职场文书
端午节演讲稿
2014/05/23 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书