Vue入门-兄弟组件之间的通信

旧城等待， 2021-09-15 14:22 425阅读 0赞

**兄弟组件通信的逻辑实现**

注意: 借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发.  
第一步: 在child1子组件中,给button按钮绑定一个点击事件toChild2, 在事件中我们通过公共的vue对象totalVm.$emit()方法去触发一个定义事件event1,并传递我们的参数str.

第二步: 在child2组件创建的钩子(created())中监听事件event1, 并触发回调函数fn1, fn1在methods中声明,其行为是输出传入的参数’hello world’

**代码示例（结合上面的分析理解代码）**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>兄弟通信</title>
        <style>
            #wrapper1,
            #wrapper2 {
                width: 300px;
                padding: 20px;
                border: 1px solid red;
                border-radius: 8px;
                margin: auto;
            }
    
            #wrapper1 {
                margin-bottom: 20px;
                border: 1px solid blue;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id="app">
            <child1></child1>
            <child2></child2>
        </div>
    </body>
    
    </html>
    
    <template id="child1">
        <div id="wrapper1">
            <h2>子组件1</h2>
            <button @click="toChild2('hello world')">向child2发消息</button>
        </div>
    
    </template>
    
    <template id="child2">
        <div id="wrapper2">
            <h2>子组件2</h2>
            <p>显示child1传过来的内容:{
       {greeting}}</p>
        </div>
    </template>
    <script>
        let totalVm = new Vue();
        let child1 = {
            template: '#child1',
            methods: {
                toChild2(str) {
                    // 发消息都是通过viewmodel的实例对象发送的
                    totalVm.$emit('event1', str);
                }
            }
        };
        let child2 = {
            template: '#child2',
            created() {
                totalVm.$on('event1', this.fn1);
            },
            data() {
                return {
                    greeting: ''
                }
            },
            methods: {
                fn1(str) {
                    console.log("子组件2收到子组件1的消息",str);
                    this.greeting = str;
                }
            }
    
        };
        new Vue({
            el: '#app',
            data: {},
            components: {
                child1,
                child2
            },
            created() {
                // 只要实例监听到该事件,当有组件发送($emit)时,就会触发回调函数
                totalVm.$on('event1', (str) => {
                    console.log('父级接收到的消息:', str)
                });
            }
        });
    </script>

**效果图**

![70][]

[70]: /images/20210802/19a69c7b65614238a9a63d86604cfa8c.png