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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 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漏洞小结
2012/02/05 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js opener的使用详解
2014/01/11 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
js获取url传值的方法
2015/12/18 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python用for循环实现九九乘法表
2018/05/31 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
IBatis持久层技术
2016/07/18 面试题
自我评价200字分享
2013/12/17 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
离职感谢信
2015/01/21 职场文书
行政前台岗位职责
2015/04/16 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Python List remove()实例用法详解
2021/08/02 Python