带着实例继续学习(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>