前端框架Vue(8)——子父组件的传参通信
来源:互联网 发布:钢铁力量6级天炉数据 编辑:程序博客网 时间:2024/06/06 22:59
父子间的通信传值是 vue 中的一个重要的内容和掌握点。
*vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲)
首先讲一下遇到的 需求背景:
解释一下:
组件之间的关系:
<div id="app"> <loginPage v-on:showState="changeState" v-if="loginShow" :fromParent="fromParent"></loginPage> <div class="web-content" v-if="webShow"> <phHeader :headerUserName="headerUserName"></phHeader> <div> <router-view></router-view> </div> <phFooter></phFooter> </div> </div>
1、子组件 login 传参数给父组件 app.vue
$emit
用法:vm.$emit( event, […args] ),触发当前实例上的事件。
子组件中代码:
submitForm:function(formName){ //与父组件通信传值 this.$emit('showState', [this.loginShow,this.formName.user])}
submitForm 是一个点击事件, showState 是一个方法,后边是多个参数写法。
父组件中代码:
首先需要在 子组件中绑定 showState 事件,前一个 showState 是在子组件定义的,后面的 changeState 是新定义的方法。
<loginPage v-on:showState="changeState" v-if="loginShow" :fromParent="fromParent"></loginPage>
changeState:function(data){ //console.log(data) if(data[0] === false){ console.log('执行') this.webShow = true;//显示web应用内容 this.loginShow = false;//隐藏login组件 this.headerUserName = data[1];//赋值headerUserName } }
然后就能在方法中获得子组件传来的参数:
data:[false, "allen"]0: false1: "allen"length: 2__proto__: Array(0)
2、父组件 app.vue 传参数给子组件 ph-Header
props
父组件中代码:
引入在父组件中的 ph-Header 子组件需要绑定 headerUserName,前一个 headerUserName 是子组件中定义的。后一个才是父组件中的参数。
<phHeader :headerUserName="headerUserName"></phHeader>
export default { name: 'app', data () { return { loginShow: true, webShow: false, fromParent:'——来自父组件', headerUserName: '用户名' } }, components:{ phHeader, phFooter, loginPage }, methods:{ changeState:function(data){ console.log(data) if(data[0] === false){ console.log('执行') this.webShow = true;//显示web应用内容 this.loginShow = false;//隐藏login组件 this.headerUserName = data[1];//赋值headerUserName } } }}
子组件中代码
子组件中需要接收 headerUserName
export default { name: '', data () { return { } }, props:[ 'headerUserName' ] }
关于父子组件的传参通信,有需要的话这边有一个比较完整的项目放在我的github上:https://github.com/AllenChinese/Go-Vue/tree/master/vue-pinghu
希望对那么可爱,还来看我博客的你 有些许的帮助!
1 0
- 前端框架Vue(8)——子父组件的传参通信
- Vue——父和子组件通信
- Vue 父组件与子组件之间的通信
- vue 父组件和子组件的通信
- 七周七种前端框架四:Vue.js 组件和组件通信
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- 前端框架Vue(3)—— vue.resource 、axios、ajax 异步通信
- EasyDSS流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
- Vue中父组件向子组件通信
- vue 父组件与子组件相互通信
- vue自定义事件 子组件向父组件通信
- vue prop 父组件向子组件通信
- Vue.js组件—父组件与子组件之间的数据联系
- 前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件
- 前端框架Vue(5)——Vue+Echarts
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
- Vue——任意组件间的通信
- 动态计算字符串的区域大小
- Uva-10271 Chopsticks(DP)
- 吃草公司框架(Ofbiz框架的二次开发)的增删查改功能总结
- Framework的启动过程
- go语言正则表达式regexp
- 前端框架Vue(8)——子父组件的传参通信
- Android Activity启动、关闭、Activity返回结果到启动它的Activity
- MongoDB用户管理
- BZOJ 1231: [Usaco2008 Nov]mixup2 混乱的奶牛 状压DP
- 【OpenGL】OpenGL系列——05像素操作
- ZooKeeper 故障恢复
- 深度学习入门帖子,转自知乎,也希望能与大家共享
- C++求斐波那切数列及前n项和
- 哈希表及处理冲突的方法