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

兄弟组件通信的逻辑实现

注意: 借助于一个公共的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>
<!--子组件child1-->
<template id="child1">
    <div id="wrapper1">
        <h2>子组件1</h2>
        <button @click="toChild2('hello world')">向child2发消息</button>
    </div>

</template>
<!--子组件child2-->
<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>

效果图

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

猜你喜欢