vue子父组件通信的实现代码


Posted in Javascript onJuly 09, 2017

之前在用vue写子父组件通信的时候,老是遇到问题!!!

子组件传值给父组件:

子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法

 

模板:

<div v-on:click="switchViewBtn">切换视图</div>

在data中定义:switchStatus = true;

方法:

switchViewBtn(){


let that=this;



this.$emit("parentView",that.switchStatus);


},

父组件:模板:

 

<div @parentView="changeView" :msg="msg"></div>

方法: 

changeView(msg){

this.switchStatus = msg;

}

这样就可以将子组件的值传给父组件了。

父组件传值给子组件:

父组件:模板:

 <div :name="name">切换视图</div>

在data中赋值:

 export default {


data() {




return {





data:‘zy'




 }



}


}

子组件中接受代码:

export default {

data() {



return {




data:‘zy'




}



},


props:[



 'name'


]

}

以上所述是小编给大家介绍的vue子父组件通信的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
PassWord输入框代码分享
Jun 07 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 #Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 #Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
You might like
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python 递归函数详解及实例
2016/12/27 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
印度网上药店:1mg
2017/10/13 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
建材业务员岗位职责
2013/12/08 职场文书
最美护士演讲稿
2014/08/27 职场文书
学风建设主题班会
2015/08/17 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python