zoukankan      html  css  js  c++  java
  • 《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
     
  • 相关阅读:
    【t090】吉祥数
    【u221】分数
    【u212】&&【t036】最大和
    【u125】最大子树和
    【u124】环状最大两段子段和
    【u123】最大子段和
    【u122】迎接仪式
    【u121】教主的花园
    【u118】日志分析
    【u117】队列安排
  • 原文地址:https://www.cnblogs.com/kitty-chan/p/12795924.html
Copyright © 2011-2022 走看看