<div id="app">
    <boy></boy>
    <girl></girl>
</div>
<script src="js/vue.js"></script>
<script>
    var kfc = new Vue();
    Vue.component("boy",{
        template:`
        <div>
            <h1>我是传出的</h1>
            <button @click="sendmsg">发送数据传</button>
        </div>
        `,
        data:function(){
            return{
                msg:"我是boy组件,要传给girl"
            }
        },
        methods:{
            sendmsg:function(ssw){
                kfc.$emit("send",this.msg)
            }
        }
    });

    Vue.component("girl",{
        template:`
            <div>
                <h1>我是接收的</h1>
                <a href="">{{mess}}</a>
            </div>
        `,
        data:function(){
            return{
                mess:""
            }
        },
        mounted:function(){
            kfc.$on("send",msg=>{
                this.mess = msg
            })
        }
    });

    new Vue({
        el:"#app"
    });
</script>