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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
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单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python遍历目录的方法小结
2016/04/28 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
Python实现括号匹配方法详解
2020/02/10 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
理货员的岗位职责
2013/11/23 职场文书
木工主管岗位职责
2013/12/08 职场文书
英语简历自我评价
2014/01/26 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
食品安全标语
2014/06/07 职场文书
python 提取html文本的方法
2021/05/20 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript