《Vue的父子组件传值》
Posted kitty-chan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《Vue的父子组件传值》相关的知识，希望对你有一定的参考价值。
《Vue的父子组件传值》
想了很久，决定还是来写一下Vue的父子组件传值，父子组件传值我所知道的有三种，第一种是a->父->b,第二种是eventBus事件车，第三种就是都知道的vuex了！讲讲第一种叭：
/*会附上我的代码*/
话就不多哔哔了，上代码···········今天就不截图了，虽然截图方便，但是不方便copy。咳咳，这个主要以登录注册为例：父组件是Login,子组件分别为login,register(我做的效果是，先注册，注册成功后，将用户名传给登录模块儿的用户输入框显示，酱紫就可以只要填写密码，感jio方便点)
Login父组件代码：
<login v-if="loginType==‘login‘"
:partInfo="infos"></login>
<register v-else
@func="getMsgForm"></register>
/*我这里是用loginType来控制切换的······*/
methods: {
getMsgForm (data) {
// 传过来的是账号以及密码
this.infos = data;
if (data) this.loginType = "login"
},
}
login登录子组件代码：
props: ["partInfo"],
data () {
return {
user: " ", //输入的用户名
password: "",
infos: this.partInfo[0], //注册好后的用户名
}
},
watch: {
partInfo () {
this.infos = this.partInfo[0];
}
},
mounted () {
this.user = this.partInfo[0];
},
register子组件：
/*点击事件触发，比如注册按钮*/
registerClick(){
let partInfo = [this.registerPhone,this.registerPassword]
this.$emit(‘func‘,partInfo)
}
主要就是这些，做的东西有点多，不好粘贴上来= = 总是按照方法，莫得问题~
以上是关于《Vue的父子组件传值》的主要内容，如果未能解决你的问题，请参考以下文章