父傳子：主要是通過 子元件使用 props() 方法來接收 父元件傳遞過來的值

Vue.component('father',{
            template:`
                    <div>
                        <p>我是father，我給我son取得名字叫{{sonName}}</p>
                        <son :myName="sonName"></son>
                    </div>
            `,
            data(){
                return {
                    sonName:'Juliet'
                }
            },
            components:{
                son:{
                    // 子元件通過 props 來接收組元件傳過來的值
                    props:['myName'],
                    template:`
                            <div>
                                <p>我是son，我father給我取名字叫{{myName}}</p>
                            </div>
                    `,
                }
            }
        })
 

子傳父： 使用 $emit('一個事件的名稱' ,'需要傳遞的資料') 方法  傳遞需要傳遞的資料 

Vue.component('father',{
            template:`
                    <div>
                        <p >我是father，son告訴我他叫{{sonName}}</p>
                        <son @tellfatherMyName="mysonName"></son>
                    </div>
            `,
            methods:{
                // 這個函式有一個引數 就是傳遞過來的資料
                mysonName(data){
                    // console.log(data)
                    this.sonName = data
                }
            },
            data(){
                return {
                    sonName:'???'
                }
            },
            components:{
                son:{
                    template:`
                            <div>
                                <button @click="tellfatherMyName">我是son ，我告訴father 我新取得名字叫{{myName}}</button>
                            </div>
                    `,
                    data(){
                        return {
                            myName:'Juliet'
                        }
                    },
                    methods:{
                        tellfatherMyName(){
                            // 子元件傳值給父元件用 $emit() 方法 
                            // 這個方法可以穿兩個值 
                            // 一個事件名稱 一個就是需要傳遞的資料
                            this.$emit('tellfatherMyName',this.myName)
                        }
                    }
                }
            }
        })
 

非父子傳值：傳值的一方通過使用 $emit() 把資料傳到事件匯流排  接收資料的一方再通過 $on() 方法來接收傳遞過來的資料

 // 建立一個新的Vue例項  作為事件匯流排
        var eventbus = new Vue()
        Vue.component('father',{
            template:`
                    <div>
                        <son></son>
                        <daughter></daughter>
                    </div>
            `,
            components:{
                son:{
                    template:`
                            <div>
                                <p>我是son daughter告訴我她名字叫{{daughterName}}</p>
                            </div>
                    `,
                    data(){
                        return {
                            daughterName:'???'
                        }
                    },
                    mounted() {
                        // 通過 $on() 方法來監聽兄弟節點傳遞的資料
                        // 這個方法有兩個引數 一個是時間的名稱 一個是函式 這個函式的預設值就是傳遞過來的資料
                        eventbus.$on('TellsonMyName',data => {
                            // console.log(data)
                            this.daughterName = data
                        })
                    },
                },
                daughter:{
                    template:`
                            <div>
                                <button @click="TellsonMyName">點選告訴son 我的名字叫{{myName}}</button>
                            </div>
                    `,
                    data(){
                        return {
                            myName:'Juliet'
                        }
                    },
                    methods:{
                        TellsonMyName(){
                            eventbus.$emit('TellsonMyName',this.myName)
                        }
                    }
                }
            }
        })