脚本宝典收集整理的这篇文章主要介绍了前端框架Vue(2)——vue 子父组件的传参通信,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
父子间的通信传值是 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>
用法:vm.$emit( event, […args] ),触发当前实例上的事件。
子组件中代码:
submitForm:@H_406_148@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)
父组件中代码:
引入在父组件中的 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/AllenChine...
希望对那么可爱,还来看我博客的你 有些许的帮助!
以上是脚本宝典为你收集整理的前端框架Vue(2)——vue 子父组件的传参通信全部内容,希望文章能够帮你解决前端框架Vue(2)——vue 子父组件的传参通信所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。