三十二、【vue面试题】兄弟组件的传值（2021/5/3）

深藏阁楼爱情的钟 2022-10-21 01:24 3阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
            <div id="app">
                    <temp1></temp1>
                    <temp2></temp2>
            </div>
            <template id="t1">
                    <div>
                            <h4>我是temp1</h4>
                            <button @click="send">将数据发送给temp2</button>
                    </div>
            </template>
            <template id="t2">
                    <div>
                            <h4>我是temp2,获取到了temp1的值{ { msg}}</h4>
                    </div>
            </template>
    
            <script>
                    var vm1 = new Vue({ 
    
                    })
                    var vm = new Vue({  //根组件
                            el: "#app",
                            data: { },
                            components: { 
                                    // 组件temp1传值给兄弟组件temp2
                                    'temp1': { 
                                            template: "#t1",
                                            data() { 
                                                    return { 
                                                            msg: "我是t1的值"
                                                    }
                                            },
                                            methods: { 
                                                    send() { 
                                                            vm1.$emit('data-msg', this.msg)
                                                            // 通过自定义事件data-msg，发送msg的值
                                                    }
                                            }
                                    },
                                    'temp2': { 
                                            template: "#t2",
                                            data() { 
                                                    return { 
                                                            msg: ""
                                                    }
                                            },
                                            mounted() { 
                                                    vm1.$on('data-msg', msg => { 
                                                            this.msg = msg;
                                                    }) //监听事件data-msg
                                            }
                                    },
                            }
                    })
            </script>
    </body>
    
    </html>