Vue父子传值与非父子传值

父传子：主要是通过 子组件使用 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)
                        }
                    }
                }
            }
        })