《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)  

　　　　} 　

 

 

 

　　主要就是这些，做的东西有点多，不好粘贴上来= = 总是按照方法，莫得问题~

　　可参考

　　　　https://blog.csdn.net/Raleway/article/details/104158621（这个主要是包含了vue的一些整体知识点，但是里面的父传子和子传父都很详细）

　　　　简单的父子组件传值可看这个：https://www.jianshu.com/p/af9cb05bfbaf