vue笔记 父子组件传值2

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





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

updateUsername 在父控件中有这个方法
this.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 获取到对应的属性

以上

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

你可能感兴趣的:(vue笔记 父子组件传值2)