欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 父子通信过程

程序员文章站 2024-03-25 09:39:58
...

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>

 


更多专业前端知识,请上【猿2048】www.mk2048.com