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 setCapture 区域外事件捕捉
Mar 18 Javascript
js获取php变量的实现代码
Aug 10 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 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
数据库相关问题
2006/10/09 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
web打印小结
2017/01/11 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
angular动态表单制作
2018/02/23 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
关于Python如何避免循环导入问题详解
2017/09/14 Python
使用Python写一个小游戏
2018/04/02 Python
Flask框架配置与调试操作示例
2018/07/23 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
django框架cookie和session用法实例详解
2019/12/10 Python
增大python字体的方法步骤
2020/07/05 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
建筑专业自荐信范文
2014/01/05 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
农村婚礼主持词
2014/03/13 职场文书
农行心得体会
2014/09/02 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
单位介绍信格式
2015/01/31 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript