Vue 父子组件与非父子组件之间的通信小例子

父组件：

<div id="epp">
    <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th colspan="3">父组件数据</th>
        </tr>
        <tr>
            <td>name</td>
            <td>{{keep}}{{change()}}</td>
            <td><input type="text" v-model="keep"></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{age}}</td>
            <td><input type="text" v-model="age"></td>
        </tr>

    </table>
    <v-border @chan1="rua" @chan2="rua2" :kp="keep" :ag="age" >

    </v-border >


</div>

子组件：

<template id="son">
    <div>
        <button @click="mson">子组件按钮</button>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="3">子组件数据</th>
            </tr>
            <tr>
                <td>name</td>
                <td>{{kp}}</td>
                <td><input type="text" v-model="kp"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{ag}}</td>
                <td><input type="text" v-model="ag"></td>
            </tr>
        </table>
        <v-son :gkp="kp" :gag="ag"></v-son>
    </div>
</template>

 

孙子（其他）组件：

<template id="gson">
    <div>

        <button @click="gchan">孙子组件按钮</button>
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="3">孙子组件数据</th>
            </tr>
            <tr>
                <td>name</td>
                <td>{{gkp}}</td>
                <td><input type="text" v-model="gkp"></td>
            </tr>
            <tr>
                <td>age</td>
                <td>{{gag}}</td>
                <td><input type="text" v-model="gag"></td>
            </tr>
        </table>
    </div>
</template>

 

JS:

 let bus = new Vue();
new Vue({
    el:"#epp",
    data:{
        keep:"keepfool",
        age:"28"
    },
    methods:{
        rua(val1){
            this.keep=val1;
        },
        rua2(val2){
            this.age=val2;
        },
        change(){
            bus.$on("shuibian",(val)=> {
                this.keep=val;
            });
            bus.$on("shuibian2",(val2)=> {
                this.age=val2;
            })
        }
    },
    components:{
        "vBorder":{
            props:["kp","ag"],
            template:"#son",
            methods:{
                    mson(){
                        this.$emit("chan1",this.kp);
                        this.$emit("chan2",this.ag);
                    }
            },
            components:{
                "vSon":{
                    props:["gkp","gag"],
                    template:"#gson",
                    methods:{
                        gchan(){
                            bus.$emit("shuibian",this.gkp);
                            bus.$emit("shuibian2",this.gag)
                        }
                    }
                }
            }
        }
    }
})