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 相关文章推荐
arguments对象
Nov 20 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
js表单验证实例讲解
Mar 31 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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
2006/12/13 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python反编译学习之字节码详解
2019/05/19 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
python序列类型种类详解
2020/02/26 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Python实现石头剪刀布游戏
2021/01/20 Python
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
九月份红领巾广播稿
2014/01/22 职场文书
《海底世界》教学反思
2014/04/16 职场文书
社团活动总结报告
2014/06/27 职场文书
汽车转让协议书
2015/01/29 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
子女赡养老人协议书
2016/03/23 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery