Vue父子传值与非父子传值

浅浅的花香味﹌ 2022-05-14 04:25 262阅读 0赞

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