<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'>傳送數(shù)據(jù)</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(){//因?yàn)閙ounted是vue的生命周期，所以用箭頭函數(shù)用this指向組件
                sent.$on("sentMsg",msg=>{
                    this.mess = msg
                })
            }

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

QQ圖片20180925082307.png