带着实例继续学习(2):父子组件通信之自定义事件

要点

我们利用之前学到的知识点做了一个用户登录框，其中

1、我们通过

this.$parent.$refs

访问相邻组件的数据

2、一般来讲，我们可以把父组件作为子组件的”集中营”(集中数据状态和事件)

接下来我们看套路：

第一步：父组件初始化数据

在父组件首先初始化，示例如下：

export default{

data(){

return{username:”“,userpass:”“}

}

}

第二步：在父组件中设置方法

methods:{

setUserName(uname){

this.username = uname;

}

},

比如我们现在的父亲组件user-login.vue

<template>
<div id="user-login" class="col-md-8 col-md-offset-2">
<h2 class="text-center">用户登录</h2>
<form class="form-horizontal" role="form">
<user-name ref="uname" placeholder="请输入你的用户名"></user-name>
<user-pass></user-pass>
<user-submit></user-submit>
</form>
</div>
</template>

<style>
@import "./../css/bootstrap.min.css";
#user-login{
margin-top: 50px;
}
</style>

<script>
import username from "./user/use-name.vue";
import usersubmit from "./user/user-submit.vue";
import userpass from "./user/user-pass.vue";

export default{
data(){
return{
username:"",
userpass:""
}
},
methods:{
setUserName(uname){
this.username = uname;
}
},
components:{
"user-name":username,
"user-submit":usersubmit,
"user-pass":userpass
}
}
</script>

那么问题来了：怎么触发这个方法呢？

在子组件中设置一个自定义事件

updateUserName是一个自定义事件名称。

在子组件中通过this.$emit(“事件名”,参数)来触发父组件的事件。

父组件user-login.vue

<user-name ref="uname" placeholder="请输入你的用户名" v-on:updateUserName="setUserName"></user-name>

export default{
data(){
return{
username:"",
userpass:""
}
},
methods:{
setUserName(uname){
this.username = uname;
}
},
components:{
"user-name":username,
"user-submit":usersubmit,
"user-pass":userpass
}
}

在子组件里调用的是方法是

updateUserName

来到子组件user-name.vue

<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">

文本框change事件调用方法

userNameChange

<script>
export default{
props:["placeholder"],
data:function () {
return {username:"张三"}
},
methods:{
userNameChange(){
// 调用父组件的方法
this.$emit("updateUserName",this.username)
}
}
}
</script>

userNameChange

方法里调用父组件的自定义方法，把值传递过去。

这样在user-submit.vue就可以拿到父组件里的值了：

<script>
export default{
methods:{
test(){
alert(this.$parent.$data.username); // 拿到父组件了定义是属性username
}
}
}
</script>