vue 父子通信过程

1、概述

每个 Vue 实例都实现了事件接口，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName, optionalPayload) 触发事件

2、示例一（未传递数据）

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue 父子通信过程（未传递数据）</title>
    </head>

    <body>
        <div id="root">
            <div id="counter-event-example">
                <p>{{ total }}</p>
                <button-counter v-on:increment="incrementTotal"></button-counter>
                <button-counter v-on:increment="incrementTotal"></button-counter>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            Vue.component('button-counter', {
                template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
                data: function() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementCounter: function() {
                        this.counter += 1
                        this.$emit('increment')
                    }
                },
            });
            new Vue({
                el: '#counter-event-example',
                data: {
                    total: 0
                },
                methods: {
                    incrementTotal: function() {
                        this.total += 1
                    }
                }
            });
        </script>
    </body>

</html>

3、示例二（传递数据）

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>vue 父子通信过程（传递数据）</title>
    </head>

    <body>
        <div id="root">
            <div id="message-event-example" class="demo">
                <p v-for="msg in messages">{{ msg }}</p>
                <button-message v-on:message="handleMessage"></button-message>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            Vue.component('button-message', {
                template: `<div>
                    <input type="text" v-model="message" />
                    <button v-on:click="handleSendMessage">Send</button>
                      </div>`,
                data: function() {
                    return {
                        message: 'test message'
                    }
                },
                methods: {
                    handleSendMessage: function() {
                        this.$emit('message', {
                            message: this.message
                        })
                    }
                }
            })

            new Vue({
                el: '#message-event-example',
                data: {
                    messages: []
                },
                methods: {
                    handleMessage: function(payload) {
                        this.messages.push(payload.message)
                    }
                }
            })
        </script>
    </body>

</html>