這裡還是非父子元件間的通訊

其實我也不喜歡看別人的大段程式碼，但這是最完整的，以後肯定有用（完整程式碼貼在最後面，自己看）

主要實現是使用vuex的公共空間存放資料，這個時候要問，那為什麼不之間用一個物件啊，其他也是可以的，但是vuex可以檢測你資料的變化，這個後期有用。

主要實現是新建一個Vuex.Store，然後在mutations裡面編寫你要修改資料的方法。再在在要修改資料的元件裡使用store.commit("setName",value);，最好不要直接賦值，為了可以檢測你的資料變化，vue本來就資料驅動的框架。另一個元件想要獲取資料的話直接store.state.userName這麼一下就可以了。

題外話：（其實vuex我現在還用的不夠多，因為要實現的功能簡單。也就先用用，後面肯定會繼續深入的。其實有時候覺得會用一個框架真的沒什麼了不起的，真正厲害的是知道它為什麼這麼涉及，怎麼設計的，如果是我的話，用現有的知識能不能做出一樣的效果。就像java為什麼只有單繼承，大學裡老師可沒教，也就是後面看設計模式的時候才知道，哦，原來是為了實現組合。）

    //使用vuex在不關聯元件之間進行通訊
    const store = new Vuex.Store({
        state:{
            userName:""
        },
        mutations:{
            setName(state,name) {
                state.userName = name;
            }
        }
    })
    //密碼
    Vue.component("user-password",{
        props:["value"],
        template:'<div class="input_message">password:\
                <input v-bind:value="value" v-on:blur="savePassword($event.target.value)" v-on:input="updateValue($event.target)" v-on:click="targetClick" type="password" class="right_box" v-bind:placeholder="placeholder"></input>\
            </div>',
        data:function() {
            return {
                placeholder:ls.enterPassword
            }
        },
        methods:{
            targetClick:function(e) {
                var target = $(e.target);
                target.removeClass("is_empty");
            },
            updateValue:function(target) {
                this.$emit("input",target.value);
                var target = $(target);
                target.removeClass("is_empty");
            },
            savePassword:function(value) {
                store.commit("setName",value);
            }
        }
    });
    //再次密碼
    Vue.component("user-password-again",{
        props:["value"],
        template:'<div class="input_message">password:\
                <input v-bind:value="value" v-on:blur="checkPassword($event.target.value)" v-on:input="updateValue($event.target)" v-on:click="targetClick" type="password" class="right_box" v-bind:placeholder="placeholder"></input>\
                <span class="psResult" v-html="checkResult"></span>\
            </div>',
        data:function() {
            return {
                placeholder:ls.enterPasswordAgain,
                checkResult:""
            }
        },
        methods:{
            targetClick:function(e) {
                var target = $(e.target);
                target.removeClass("is_empty");
            },
            updateValue:function(target) {
                this.$emit("input",target.value);
                var target = $(target);
                target.removeClass("is_empty");
            },
            //失去焦點後檢驗兩個密碼是否相等
            checkPassword:function(value) {
                if(value == store.state.userName) {
                    this.checkResult = "兩次結果相同";
                }
            }
        }
    });