<div class="box">
        <first></first>
        <second></second>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        var sent = new Vue()//中间量

        Vue.component("first",{
            template:`
                <div>
                    <h1>这是first组件</h1>
                    <button @click='add'>传送数据</button>
                </div>
            `,
            data:function(){
                return{
                    msg:'hello vue'
                }
            },
            methods:{
                add:function(){
                    sent.$emit("sentMsg",this.msg) 
                }
            }
        })
        
        Vue.component("second",{
            template:`
                <div>
                    <h1>这是second组件</h1>
                    <p>{{mess}}</p>
                </div>
            `,
            data:function(){
                return{
                    mess:''
                }
            },
             mounted:function(){//因为mounted是vue的生命周期，所以用箭头函数用this指向组件
                sent.$on("sentMsg",msg=>{
                    this.mess = msg
                })
            }

        })
        
        new Vue({
            el:'.box'
        })
    </script>

QQ图片20180925082307.png