要點

我們利用之前學到的知識點做了一個使用者登入框，其中
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>