vue笔记 父子组件传值2

上一篇文章中传值巨麻烦, 所以这里有一个新鲜的替代方法
这里只演示 username 部分 userpass 在这里不演示, 自己对着写就行

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div>
        <div class="form-group">
            <label  >用户名:</label>
            <input type="text" class="form-control" ref="uname"
                   v-on:change="userNameChange"
                   v-model="username" :placeholder="morenwenzi">
        </div>
    </div>
</template>

<style>
</style>
<script>
    export default {
        props:['morenwenzi'],
        data:function () {
            return{
                username:""
            }
        },
        methods:{
            userNameChange(){
                this.$emit("updateUsername",this.username);
            }
        }
    }
</script>

这里 使用 v-on:change="userNameChange" 来监控输入框的改变
在 下面 userNameChange 的方法中 调用父控件的方法 ,并将文本内容传过去this.$emit("updateUsername",this.username);

updateUsername 在父控件中有这个方法
this.username 当前控件 的值

<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div>
        <form>
            <username  morenwenzi="请输入用户名" ref="uname"
            v-on:updateUsername="setUserName"></username>

            <userpass  placeholder="请输入密码" ref="upass"
            v-on:updateUserPass="setUserPass"></userpass>

            <usersubmit></usersubmit>

            <button type="button" class="btn btn-success" v-on:click="show()">父控件提交</button>
        </form>
    </div>
</template>

<style>
    @import "./../css/bootstrap.css";
</style>
<script>

    import  user_name from  "./user/username.vue";
    import user_submit from "./user/usersubmit.vue"
    import user_pass from "./user/userpass.vue"
    export default {
        data:function(){
            return {
                username: "",
                userpass: ""
            }
        },
        components:{
            'username':user_name,
            'usersubmit':user_submit,
            'userpass':user_pass
        },
        methods:{
            setUserName(uname){
                this.username = uname;
            },
            setUserPass(upass){
              this.userpass=upass;
            },
            show(){
                alert(this.username+this.userpass);
            }
        }
    }
</script>

  <username  morenwenzi="请输入用户名" ref="uname"
            v-on:updateUsername="setUserName"></username>

v-on 定义一个自定义方法 updateUsername 与子组件中对应
setUserName 可以随便写,只要在下方的methos中有方法即可

 setUserName(uname){
                this.username = uname;
            },

将子控件的this.username 赋给父控件的this.username

以上就完成了绑定
下面来说取值
取值有两种方法,加上上一篇的有三种

                alert(this.username+this.userpass);
            }

因为文本框内容的修改,父控件中 this.username的值也随之改变了
直接使用this.username 即可获得这个属性

在另外一个子控件中如何获取到 这个属性呢
this.$parent.$data.username
this.$parent. 获取到父控件
$data 获取到父控件的 data
username 获取到对应的属性

以上

我是小菜鸡，我喂自己袋盐