《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的父子组件传值》的主要内容,如果未能解决你的问题,请参考以下文章

VUE父子组件之间的传值,以及兄弟组件之间的传值

03、vue 页面跳转传值,父子组件传值

React 父子组件传值

uniapp 父子组件传值

vue中父子传值

Vue父子组件传值