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开发包大全整理
Dec 22 Javascript
JavaScript 特殊字符
Apr 05 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php文件上传类的分享
2017/07/06 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Python实现身份证号码解析
2015/09/01 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
校长先进事迹材料
2014/02/01 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
大学生见习总结报告
2015/06/24 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL