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 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
分享15个Webpack实用的插件!!!
Mar 31 Javascript
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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
浅谈php7的重大新特性
2015/10/23 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
python实现多线程的两种方式
2016/05/22 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python 多个参数不为空校验方法
2019/02/14 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
高中生学习的自我评价
2013/12/14 职场文书
中专生求职自荐信范文
2013/12/22 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书