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 相关文章推荐
原生js 秒表实现代码
Jul 24 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
vue axios post发送复杂对象问题
Jun 04 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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
global.php
2006/12/09 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python安装requests库的实例代码
2019/06/25 Python
python实现大文件分割与合并
2019/07/22 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
党代会心得体会
2014/09/04 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
社区母亲节活动总结
2015/02/10 职场文书
社区义诊通知
2015/04/24 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python