码迷,mamicode.com
首页 > 其他好文 > 详细

《Vue的父子组件传值》

时间:2020-04-29 10:52:02      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:mic   lse   16px   strong   soft   this   显示   let   pass   

《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的父子组件传值》

标签:mic   lse   16px   strong   soft   this   显示   let   pass   

原文地址:https://www.cnblogs.com/kitty-chan/p/12795924.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!